CODEWITHSUNDEEP
htmlcsscentering
David Ly
David Ly

Reputation: 31596

Strange centering problem in Firefox and IE8

The navigation bar on my site http://hungryathome.net doesn't center properly on Firefox and IE8 Standards mode. It centers properly in IE7 Compatability mode and in Chrome.

What's odd is that setting a Margin on the div (id="navlinks") to 4px or more will make it center properly. Any less will result in it being slightly off-center. I changed the values back and forth in Firebug and it's confusing the heck out of me. Any explanation for why that's happening?

Upvotes: 3

Views: 110

Answers (1)

animuson
animuson

Reputation: 54757

Aha, looking at Firebug using their awesome controls which put the blue color over the elements, your header image is actually hanging down about 3 or 4 pixels over your nav bar, which is causing it to move the nav over and actually make it smaller, so it is centering it "properly". Try making your header a few pixels taller until it snaps into position correctly.

example http://img809.imageshack.us/img809/9784/example.jpg

EDIT: Or apply a border: 0 style to that image so it doesn't add the border around it, might be a better solution...

Upvotes: 1

Related Questions