CSS <ul> <li> gap in IE7

Question

I have a CSS <ul> <li> nested menu that works perfectly in IE 8 and firefox but in IE7 it produces a small gap between the elements. this is my CSS:

#nav, #nav ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position:static;/*the key for ie7*/
    line-height: 1.5em;

}

#nav li
{
    float: inherit;
    position: relative;
    width: 12em;
}
#nav ul
{

    position: absolute;
    width: 12em;
    top: 1.5em;
    display: none;
    left: auto;

}
#nav a:link, #nav a:active, #nav a:visited
{

    display: block;
    padding: 0px 5px;
    border: 1px solid #258be8; /*#333;*/
    color: #fff;
    text-decoration: none;
    background-color: #258be8; /*#333;*/
}

#nav a:hover
{
    background-color: #fff;
    color: #333;

}
#nav ul li a
{
    display: block;
    top: -1.5em;
    position: relative;
    width: 100%;
    overflow: auto; /*force hasLayout in IE7 */
    right: 12em;
    padding:0.5em; 
}

#nav ul ul
{
    position: absolute;
}

#nav ul li ul
{
    right: 13em;
    margin: 0px 0 0 10px; 
    top: 0;
    position: absolute;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul
{
    display: none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul
{
    display: block;
}

#nav li
{
background: url(~/Scripts/ourDDL/ddlArrow.gif) no-repeat center left;
}

#divHead, #featuresDivHead
{
    padding: 5px 10px;
    width: 12em;
    cursor: pointer;
    position: relative;
    background-color: #99ccFF;
    margin: 1px;
}
/* Holly Hack for IE \*/
* html #nav li { float: left; height: 1%; }
* html #nav li a { height: 1%; }
/* End */

and here is an example for a menu:

<ul id='nav'><li><a href="#">Bookstore Online</a></li>
    <li><a href="#">Study Resources</a></li>
    <li><a href="#">Service Information</a></li>
    <li><a href="#">TV Broadcast</a></li>
    <li><a href="#">Donations</a></li></ul>

Answer 1

If you're displaying the <li> elements inline (to create a horizontal menu) the line-breaks between the sibling <li>s are being converted into a single white-space. You can either comment-out the spaces, or put all the siblings on the same line:

commenting-out:

...<li>element One</li><!--
--><li>element Two</li><!--
--><li>element Three</li>...

or:

...<li>element One</li
   ><li>element Two</li
   ><li>element Three</li>...

(in the latter example note the closing > of the <li> tags on the next line immediately preceding the next sibling)

or you can use same-line siblings:

...<li>element One</li><li>element Two</li><li>element Three</li>...

You could also just use float: left on the li elements, which takes them out of the inline document flow. Possibly a negative left-margin to move the li left to 'cover' the preceding whitespace, though it would likely take trial and error to find a suitable measurement to cover the space without covering the preceding li element.

Answer 2

I actually fixed it by setting vertical-align: bottom to LI elements (and yes, I didn't remove spaces and line breaks :)

Answer 3

It may be because of the spaces between the list items. You can either fix the problem by removing the spaces between the list items like this:

<ul id='nav'><li><a href="#">Bookstore Online</a></li><li><a href="#">Study Resources</a></li><li><a href="#">Service Information</a></li><li><a href="#">TV Broadcast</a></li><li><a href="#">Donations</a></li></ul>

Or this:

<ul id='nav'><li><a href="#">Bookstore Online</a></li><li
    ><a href="#">Study Resources</a></li><li
    ><a href="#">Service Information</a></li><li
    ><a href="#">TV Broadcast</a></li><li
    ><a href="#">Donations</a></li></ul>

Or if you want nicer-looking HTML, you can put comments between the list items:

<ul id='nav'><li><a href="#">Bookstore Online</a></li><!--
    --><li><a href="#">Study Resources</a></li><!--
    --><li><a href="#">Service Information</a></li><!--
    --><li><a href="#">TV Broadcast</a></li><!--
    --><li><a href="#">Donations</a></li></ul>

There are also tricks to remove the spaces using CSS, as described here.

Answer 4

Fix: Add zoom:1 and *display: inline to the element in CSS

Original CSS:

.blueberry .pager li {
display: inline-block;
}

Fixed CSS:

.blueberry .pager li {
display: inline-block;
zoom: 1;
*display: inline;
}

The asterisk (*) in front of display: inline allows for other browsers to ignore that line.

from: http://uncorkedstudios.com/2011/12/12/how-to-fix-the-ie7-and-inline-block-css-bug/

Answer 5

I assume you're trying to make a horizontal nav? Try adding display:inline to your container. EDIT:

NM. In ie6, they show up as a horizontal bar. +1 for mikez's answer. that should do it.

Answer 6

In your current model its the extra space between li tags. Really dumb IE thing. The following css however works to fix it and keep your li tags from being all on 1 line. (tested in IE7, Opera, Chrome)

<style type="text/css">
    #nav { margin:0; padding:0; list-style-type: none; width:12em; }
    #nav li { position:relative; background:url(~/Scripts/ourDDL/ddlArrow.gif) no-repeat center left; display:inline; }
    #nav a, 
    #nav a:active, 
    #nav a:visited { display:block; padding:5px; border:1px solid #258be8; color:#fff; text-decoration:none; background-color:#258be8; width:100%; }
    #nav a:hover { background-color: #fff; color: #333; }
</style>

You had a lot of extra code for dropdowns maybe? anywho I didn't add that.

Answer 7

you can add this styles to your styles.ie.css

/* for IE7 only */
*+html #nav { font-size: 0; line-height: 0;}
*+html #nav li {font-size: 12px; line-height: 18px; }