OK, this is driving me crazy; I've played around with fixed-width.css, navigation.css and pages.css but no matter what I do, the navigation bar loads roughly 24px lower when loaded in Chrome than it does in Safari, Firefox or even IE:

http://hcsstaffing.com

I know IE is notorious for requiring custom CSS code to deal with issues like this, but I've never seen that in Chrome, and this isn't a particularly unusual CSS request, just the positioning of the navigation menu.

If I do have to create custom code just for Chrome, fine (although any assistance anyone could give with that would also be appreciated), but is there something else that I'm missing using the existing CSS code?

Thanks in advance for any insight.

Comments

echoz’s picture

echoz commented
Status: Active » Fixed

The way you're centering your menu is not ideal, but besides that, I see that the menu's ul having display: inline; is causing this (from class .inline), so setting this particular ul (#navigation ul.menu) to display: block; fixes the visual problem. You might experiment with display: inline-block; on your li elements to center your menu.

Brainwrap’s picture

Brainwrap commented

Thank you so much!

Yeah, technically the menu isn't actually "centered", I just spaced out the tabs wide enough to perfectly fill out the horizontal space across the top. I've always had a problem getting menus to center properly, and in this case it's a pretty basic site with only a half-dozen pages so I sort of cheated a bit.

Thanks again for the fix, I'll take your advice and will experiment a bit.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.