Troubles with CSS Dropdown Menu

Hi all!

Well I’ll cut straight to the point. I’m working on a site for a client (which will eventually be made into a WP theme), but I’m having issues getting my dropdown navigation to align properly across operating systems.

The site is here:

On my mac, the top of the drop down menus align with the bottom of the header perfectly. However, on a windows machine, the tops do not align correctly.

Example images:


I believe it has to do with the fact that I’m using fonts for the top navigation, instead of images. When the font changes, the alignment changes with it.

I’m looking for some solutions, and I am open to anything. My final resort is to use images (which I would like to stay away from, as I would like my client to be able to change the navigation choices at will).

Go Sitepoint Forums!

Quick update. If I use images for the top nav, and move the “font-family: “Gill Sans”…” declaration down to the “ul#dropdown li” section of the CSS code, it works pretty well. IE 8 still doesn’t line up perfectly, but Chrome does now.

And if I have the font-family decoration in both the top nav and the dropdown, the problem crops up again.

Does anyone know what is going on?

Okay, I discovered the fix. I was using ‘em’ units for my nav fonts, and this was causing cross-system issues. Switching to pixel units fixed everything.

Okay, I even just tried converting the header text to images, and it still doesn’t fix it. Damn it! What is going wrong?

The thing is, it almost lines up perfectly in IE8 on windows, but Chrome on Windows does not line up properly.

Yeah, that doesn’t fix it at all.

Applying a top of 45px and a z-index of 99 does not change that fact that when the fonts are changed, the dropdown menu’s position changes too.

You have the position problems. Please fix the top position. Also use z-index value.
The value is given below. Please try.