Question

I have a large menu built from lists.

It is displaying correctly in all the modern browsers I have tried and IE8, however in IE7 the list items appear to be given large amounts of margin of varying size depending on the size of the list item (see image comparison below):

Unfortunately the debugging tools in IE7 are less than optimal and I am having a real hard time working out where the issue is coming from. The source code is a bit lengthy to post here so I have made a JSfiddle for your viewing pleasure.

View source code and working demo

Can anyone see where this mystery spacing is coming from, and how can I put it straight?

Answer 1

In IE7 the <ul> tags are inheriting a line-height : 1.5em, disabling it in ie7 removes the annoying spacing. Updated fiddle

This condition is the culprit

ul {
    /* line-height: 1.5em; */
    list-style-position: outside;
}

Additional

Ok I see what you mean about the white gap. This looks like its (surprise surprise) one of those annoying ie7 ‘features’. I just got round it by using a hack

ul li, ul li a {
    /* Needed in ie7 to stop list items expanding vertically
    *line-height:1.2em;
}

with

* html ul li a {
    height:15px;
}

or

ul#map > li > a.map-item {
    height:auto;
    *height:15px;
}

Fiddle with no spacing in IE7

A better way would be to create an IE7 only stylesheet and declare this as standard rather than relying on a hack.