Margin:auto quirk in Netscape 6+ | October 3, 2003

Thanks to Gus Campbell for spotting this issue. When centering an div using margin:auto, in Netscape 6+, if you reduce the screen width to less than the width of the div, you get a negative margin on the left hand side of the screen. This renders your site unusable for people on small monitors as it's impossible to read the text falling off the left had side of the page.

Gus did some poking around and found that setting a minimum width on the body tag would combat this problem. He also believes that, rather than being a bug, this is actually the recommended behavior.

I must admit this is a new one on me. I did a bit of googling but couldn't find this mentioned anywhere. Is this a new issue or did I just forget to read the memo?

Posted at October 3, 2003 8:29 AM

Comments

Jon Hicks said on October 3, 2003 8:55 AM

I found this problem with my site (http://exp.hicksdesign.co.uk/archives/000062.php)
It affected all gecko browsers, but then found the min-width fix on CSS Discuss, and all was well. The odd thing is, it doesn’t affect the auto margin sample on Blue Robot:

http://bluerobot.com/web/css/center1.html

Although this is a very simple layout - maybe its something to do with how elements are placed inside?

paul hammond said on October 3, 2003 10:35 AM

It’s not a new problem, but I don’t think anyone ever got round to writing the memo - the closest I can find is Yoz Grahame’s ramblings on the subject: http://cheerleader.yoz.com/archives/000840.html

He found a slightly different fix involving 0px borders, but the min-width solution seems much more elegant

Andy McCulloch said on October 3, 2003 11:52 AM

Thanks Andy, it’s something I noticed recently on my site, I hadn’t been able to find a solution.
I can’t quite understand why this would be considered a ‘recommended behaviour’ though.

Roger Johansson said on October 3, 2003 9:38 PM

I ran into this a while back (http://www.bostream.nu/bereastreet/archive/200307.html#e0307301116) and, like Jon, found out about the min-width fix from the CSS Discuss list.

Charles Stuart said on October 4, 2003 9:27 AM

i had a negative margin problem as well. i was setting the content width with: body { width: 500px; } with a left margin as well. on one of the pages there was a url which was wider than 500px, which caused the page to load about -200px or so off the view port. reset the body width a bit wider and everything was alright. weird way to handle that situation. it appeared only to be a problem in mozilla, although i don’t have a windows box handy to test such things.

just my two cents.