CSS gap in IE7

Question

I have a CSS

• nested menu that works perfectly in IE 8 and firefox but in IE7 it produces a small gap between the elements. this

Answer 1

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 2

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 3

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

Answer 4

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 5

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 6

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.