rawb Posted March 19, 2008 Share Posted March 19, 2008 I've got a simple problem really.. I've got a background image that is centered and repeates vertically across the page as a property of my page's <body>, and then I've got a div that will contain my content and is centered (using margin: auto). In IE it works exactly as intended. My problem is that in Firefox, the container div is one px to the left of the center of the background. So either the { background: center } renders 1px to the right in FF relative to IE, or the { margin: auto } renders 1px to the left in FF relative to IE. the css * { margin: 0; padding: 0; border: 0; } body { background-color: #b0b7bb; background-image: url("../img/bg.gif"); background-position: center; background-repeat: repeat-y; } #container { background-color: red; margin: auto; width: 885px; } the html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> test </div> </body> </html> the product (it's very hard to see the problem unless you zoom in because it's just a 1px difference.. but it's there and an annoyance): http://rawbwk.com/test/ Quote Link to comment Share on other sites More sharing options...
haku Posted March 19, 2008 Share Posted March 19, 2008 I don't know that it will help, but try changing this: background-image: url("../img/bg.gif"); background-position: center; to this: background-image: url("../img/bg.gif") 50% 50%; Quote Link to comment Share on other sites More sharing options...
rawb Posted March 19, 2008 Author Share Posted March 19, 2008 I don't know that it will help, but try changing this: background-image: url("../img/bg.gif"); background-position: center; to this: background-image: url("../img/bg.gif") 50% 50%; Has the same effect.. I sure appreciate the advice though. Quote Link to comment Share on other sites More sharing options...
haku Posted March 19, 2008 Share Posted March 19, 2008 What doctype are you using? Quote Link to comment Share on other sites More sharing options...
rawb Posted March 19, 2008 Author Share Posted March 19, 2008 What doctype are you using? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Quote Link to comment Share on other sites More sharing options...
haku Posted March 19, 2008 Share Posted March 19, 2008 Honestly, I don't see it. Unless you are talking about the the fact that there is a scrollbar on the right side of the page in IE, and not in FF. That will make everything a little different in FF - it has more room to expand. But the red test div looks equally centered in both browsers to me. Quote Link to comment Share on other sites More sharing options...
rawb Posted March 19, 2008 Author Share Posted March 19, 2008 ie.. ff.. It's just 1 px so even in these screens it's tough to tell, but the ff version is 1px off... Quote Link to comment Share on other sites More sharing options...
haku Posted March 19, 2008 Share Posted March 19, 2008 I still don't really see it, but if you are that determined to fix it, then first you should get rid or this: * { margin: 0; padding: 0; border: 0; } And use a CSS reset sheet instead. That code isn't very good, and could *potentially* be what is causing the issue you speak of. I doubt it, but with such minimal code, there are only so many spots that this could be happening in. Switching to a more effective method (reset sheet) of resetting your browser may solve the problem. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.