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/ Link to comment https://forums.phpfreaks.com/topic/96817-centered-bg-and-margin-auto-dont-line-up-as-intended-in-mozilla/ 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%; Link to comment https://forums.phpfreaks.com/topic/96817-centered-bg-and-margin-auto-dont-line-up-as-intended-in-mozilla/#findComment-495466 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. Link to comment https://forums.phpfreaks.com/topic/96817-centered-bg-and-margin-auto-dont-line-up-as-intended-in-mozilla/#findComment-495496 Share on other sites More sharing options...
haku Posted March 19, 2008 Share Posted March 19, 2008 What doctype are you using? Link to comment https://forums.phpfreaks.com/topic/96817-centered-bg-and-margin-auto-dont-line-up-as-intended-in-mozilla/#findComment-495501 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"> Link to comment https://forums.phpfreaks.com/topic/96817-centered-bg-and-margin-auto-dont-line-up-as-intended-in-mozilla/#findComment-495601 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. Link to comment https://forums.phpfreaks.com/topic/96817-centered-bg-and-margin-auto-dont-line-up-as-intended-in-mozilla/#findComment-495617 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... Link to comment https://forums.phpfreaks.com/topic/96817-centered-bg-and-margin-auto-dont-line-up-as-intended-in-mozilla/#findComment-495652 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. Link to comment https://forums.phpfreaks.com/topic/96817-centered-bg-and-margin-auto-dont-line-up-as-intended-in-mozilla/#findComment-495679 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.