Menu lines up perfect in firefox, but not ie

I know I took a shortcut by making my menu bg part of the entire bg image, and best case would be to make it the bg of the menu, but i digress.

You will see the outside of my menu buttons are about 2px off vertically when viewing in ie. Can’t figure out why really. Any ideas?

Print - Municipal Resident Directory and Map


The menu looks fine in IE9 to me.

I don’t know the technical reason why this is happening but it is probably something to do with the specific line height being applied the nav elements and IE7 calculating something differently.

Just whack in some IE7 conditionals and remove 2/3px of the padding/margin as a quick fix.

Or do it properly with an extra div at the top containing the logo with a min-height declaration which determines where the nav starts.

good luck

The problem may be that IE 7 and lower positions the dropdown different from other browsers. You may need something like “left:0; top:xx;” to make the positioning work the same in all browsers.