Background Issue with Firefox

[Reverend]

First time poster here, hi. =)So I'm working on a portfolio site of mine - www.andrewdrennen.com - focusing on being as strict as possible in terms of proper CSS and XHTML. Doing alright so far, except I've ran into a couple of problems with Firefox displaying the CSS information correctly.Basically, this is what's going on: In IE, it loads the background image (a horizontal bar image) for a div tag and for the body background as it should. In FF, however, it sets the horizontal image lower than it should, and places the body background image higher than it should. The end result leaves the background bar looking lighter than normal and making the horizontal image a bit out of place.Apologies if I overlooked an already existing topic on this issue, one's patience only goes so far when searching through threads. =PThanks in advance for any help that can be offered.My CSS code:

body {  font-family: arial;  margin-top: 0px;  margin-left: 0px;  background-color: #c0c6ca;  background-image: url("../images/bg.gif");  background-repeat: no-repeat;  background-position: left;    	 	}	#top {  width: 800px;  height: 26px;  background-image: url("../images/top.gif");  margin-top: 0px;  background-repeat: no-repeat;  background-position: left; 	}	#mainMenu {  background-color: inherit;  position:relative;  margin-left: 53px;  margin-top: 12px;		}

[SFB]

Doing alright so far, except I've ran into a couple of problems with Firefox displaying the CSS information correctly.

didnt you mean that firefox was dispaling it incorrectly?this is the first time someone has said firefox messds up and ie did it right. is this happening on your home page? i went to your site you posted above but couldnt see what was wrong with it. I dont see any problems with the css

[Reverend]

er, yeah. Incorrectly, I meant. I've shown a few other people, they see the same thing..This is what I'm seeing:

[Err]

#top {  display: block;  float: left;}#mainMenu img { float: left; display: block;}

By displaying the images block and floating them to the left,it removes any padding it might have. Be sure to float the whole blockwhere the image is... in this case #top.(Poster is currently too sleepy to post more info.)

[Reverend]

Working with this on my PC before I upload.. It's fixed the horizontal bar, for which I'm very thankful. Any idea what's up with the body background image?

[snowboard01]

Whatever it is firefox is displaying it right and ie screwing it up the way you like it. Trust me it has happened to me you can't blame firefox for being standerds compliant.

[Err]

Working with this on my PC before I upload.. It's fixed the horizontal bar, for which I'm very thankful.  Any idea what's up with the body background image?

<{POST_SNAPBACK}>

Hmm, after looking at the code more closely, floats are not needed on them images. Here is a good working example here:css:

body {  font-family: arial;  margin-top: 0px;  margin-left: 0px;  background-color: #c0c6ca;  background-image: url(http://www.archivedgaming.com/adrennen/images/bg.gif);  background-repeat: no-repeat;  background-position: left;         }a img {  border: 0;}#top {  width: 800px;  height: 26px;  background-image: url(http://www.archivedgaming.com/adrennen/images/top.gif);  margin-top: 0px;  background-repeat: no-repeat;  background-position: left;   float: left;  display: block;}  #mainMenu {  margin-left: 53px;  margin-top: 12px;}

html:

<div id="top">  <div id="mainMenu">    <a href="#"><img src="images/mn_bio.gif" alt="" /></a>    <a href="#"><img src="images/mn_frn.gif" alt="" /></a>    <a href="#"><img src="images/mn_gra.gif" alt="" /></a>    <a href="#"><img src="images/mn_wri.gif" alt="" /></a>    <a href="#"><img src="images/mn_con.gif" alt="" /></a>  </div></div>

Also, you don't need the border="0" you can just callyour css to do that with the added a img {border: 0}.Quick Link: http://oneuse.awardspace.com/navigation_menu2.htmlHoped that helped.

[Reverend]

Thanks for the tip with the border. Ah, and I found the issue with Firefox: The background-position line in the code for the body{ } area was causing it to shove the background upward. o.OWhen I read snowboard's mention of Firefox displaying it correctly, it suddenly occurred to me to manually remove certain aspects of the CSS until I found the issue. Technically, IE was displaying it correctly as well, but for whatever reason, Firefox wasn't working with the background-position line. A mistake on my part for not thinking to just comb through the code.. meh, oh well.Thanks again to everyone for their help. =)