positioning header with CSS

trouble positioning header the same in IE and firefox

Page 1 of 1

2 Replies - 879 Views - Last Post: 07 February 2009 - 07:15 PM

#1 cj2525  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 5
  • Joined: 14-March 08

positioning header with CSS

Posted 06 February 2009 - 02:54 PM

Attached File  index.html (5.61K)
Number of downloads: 55Attached File  main.css (6.28K)
Number of downloads: 67I am having trouble getting the header on a website I am working on to align properly. It looks fine on IE but is appearing lower on the page in firefox. Any
suggestions on how to fix this?
Here is the xhtml code snippet for the header section and attached is the css file:
<div class="container" style="clear:both;">
	<div id="header">
	  <!--contains the logo image/-->
	  <span class="topLinks" style="margin-top:0;"><a href="siteMap.html">Sitemap</a> | <a href="mailto:harrisoncountycasa@verizon.net">Contact</a> </span>
		<span id="whiteTopLinks">Home </span>
		<p><img src="greenTab.png" width="301" height="22" id="greenTab" alt="tabImg" /></p>
		<img src="images/CASA070711-h.jpg" width="313px" height="213px" style="float:left;z-index:1;margin-top:-20px;" alt="(copyright National Casa Association)"  />
		<img src="casalogo.png" height="171" width="180" alt="Casa logo" style="margin-top:-20px;" />
		<div id="logoText"><span style="font-weight:bolder;font-size:30pt;">CASA</span> <br />
			 <span style="font-size:16pt;">Court Appointed Special Advocates</span> <br />
		 <span class="style6">for CHILDREN		</span><span class="style2"><br />
		 ___________________________________</span><!--end of style2//--><br />
				<span class="style8">Harrison County
		  CASA Program, Inc.<br />
		P.O. Box 1876<br />
		Clarksburg, WV 26302<br />
		304-623-5749</span><!--end of style8 span//-->
		<br />
	</div><!--end of logoText div//-->
	<br />
	<p></p>

   </div><!--end of header id//-->
	 <div class="nav">
			<a class="button" href="index.html" onclick="this.blur();"><span>Home</span></a>
		  <a class="button" href="about.html" onclick="this.blur();"><span>About Us</span></a>
			<a class="button" href="volunteer.html" onclick="this.blur();"><span>Volunteer</span></a>
			<a class="button" href="donate.html" onclick="this.blur();"><span>Donate</span></a>
			<a class="button" href="events.html" onclick="this.blur();"><span>News & Events</span></a>
			<a class="button" href="resources.html" onclick="this.blur();"><span>Resources</span></a>
	</div><!--end of navigation //-->


Is This A Good Question/Topic? 0
  • +

Replies To: positioning header with CSS

#2 b.ihde  Icon User is offline

  • D.I.C for life
  • member icon

Reputation: 43
  • View blog
  • Posts: 1,070
  • Joined: 29-September 08

Re: positioning header with CSS

Posted 07 February 2009 - 01:27 AM

Hi!

Well, this is a never-dying question...:blink:

But - look at this link, where this issue is solved by using different stylesheets..

Hope that helps!!

*EDIT* this is the wrong forum, should be HTML&CSS ;)
Regards

Ben.Ihde

This post has been edited by b.ihde: 07 February 2009 - 01:29 AM

Was This Post Helpful? 0
  • +
  • -

#3 Will_00  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 64
  • Joined: 20-July 08

Re: positioning header with CSS

Posted 07 February 2009 - 07:15 PM

You could do something similar to this:

#header {
top:0px;
position:absolute;
}



And then...

<div id="header">
whatever....
</div>
<div id="body">
.....etc.
</div>


Was This Post Helpful? 0
  • +
  • -

Page 1 of 1