Jump to content

Background Issue with Firefox


Reverend
 Share

Recommended Posts

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;		}

Link to comment
Share on other sites

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
Link to comment
Share on other sites

#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.)

Link to comment
Share on other sites

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?

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. :)

Link to comment
Share on other sites

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. =)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...