Question

I have a navigation menu generated by WordPress, meaning I have pretty much no control on how it is output.

I have used css to style it the way I want with on-hover submenus, but it looks off in IE7. It does not have any problems in other browsers.

The main menu may seem off even in browsers that work because I am using @fontface on my website but did not include in the jsFiddle. The main problem is the gaps between the submenu items.

I have tried vertically aligning the submenu li and a, but it either made it worse or didn’t fix the problem.

I have replicated the problem here: [link removed]

---

If I add

#menu-header .sub-menu a { height: 100%; }

It fixes the vertical gap problem, but the items are no longer the same width.

Answer 1

You can try the following :

#menu-header .sub-menu a { zoom: 1; }

This will remove the gap, but items will be the same width as the inner content.

I had the same problem some time ago. What I did was, create a container div inside the li. so that longer text can wrap, and set a static width. You can even use jQuery to adjust the widths of each dropdown dynamically, but that a whole different story.

Few references :

http://work.arounds.org/issue/20/removing-gaps-between-list-items-containing-anchor/

http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

http://www.belafontecode.com/3-ways-to-get-rid-of-spaces-in-list-item-navigation-in-ie6/