views:

17

answers:

1

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?

+1  A: 

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

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

animuson
Edited this, I just noticed that the border is not part of the image, but actually the default border that browsers add around images within a link, so removing it should fix the problem (saves you 6 or so pixels).
animuson
Interesting. That's quite subtle and even with the blue highlight in Firebug it was hard to notice. Is finding this kind of thing just a matter of getting used to these subtleties? Also it didn't help that hovering over the navlinks div highlighted the entire horizontal area.
Davy8
Yeah, the border's gone in the local copy but me and all my friends use Chrome which doesn't show image link borders by default so didn't notice it until today.
Davy8
Well yes, the div will expand to its entire extent in the background but the content part is only the available width because it doesn't want to push behind another element. So in reality the available content filling area was actually smaller than the div area. At first I didn't notice but once I was looking for those oddities it was a bit easier to spot, even with that little amount.
animuson