Question

I’m having a menu spacing issue in IE7 and IE6 that I cannot get to look right.

My navigation can be found at http://js.philosophydesign.com

_{(source: philosophydesign.com)}

As you can see in IE8 and others it displays fine. IE7 the menu items are partially seperated but in IE6 they are seperated hugely.

Navigation HTML:

<a class="float-left" href="http://js.philosophydesign.com"><img src="http://js.philosophydesign.com/wp-content/themes/philosophy/images/logo.gif" alt="Jeremy Stratton - Writing that works" title="Jeremy Stratton - Writing that works" /></a>
<div id="mainnavcont" class="float-right">
  <ul id="mainmenu" class="menu">
    <li id="menu-item-25" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-6 current_page_item menu-item-25"><a href="http://js.philosophydesign.com/">I get to your point</a></li>
    <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="http://js.philosophydesign.com/me-and-my-work/">Me and my work</a></li>
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="http://js.philosophydesign.com/things-ive-written/">Some of the things I’ve written</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="http://js.philosophydesign.com/improve-your-writing/">Improve your writing</a></li>
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="http://js.philosophydesign.com/what-people-say-about-me/">What people say about me</a></li>
    <li id="menu-item-30" class="menu-item menu-item-type-taxonomy menu-item-30"><a href="http://js.philosophydesign.com/category/my-blog/">My blog</a></li>
    <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-31"><a href="http://js.philosophydesign.com/get-in-touch/">Get in touch</a></li>
  </ul>
</div>

Navigation CSS:

/**** Main Navigation ****/
div#mainnavcont {
    float:right;
    width:673px;
}
ul#mainmenu {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
}
ul#mainmenu li a {
    color:#000;
    display:block;
    font-family:"HelveticaNeueLight45", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    padding-left:10px;
    margin-left:-10px;
    text-decoration:none;
}
ul#mainmenu li a:hover, ul#mainmenu li.current-menu-item a, ul#mainmenu li.current-page-ancestor a {
    background:url(images/navbg.png) no-repeat 5px 50%;
}

Anyone know why this menu is acting up in IE7 and IE6?

Thanks

Scott

EDIT: Got it working with this css:

/**** Main Navigation ****/
div#mainnavcont {
    float:right;
    width:673px;
}
ul#mainmenu {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    width:200px;
}
ul#mainmenu li {
    display:block;
    float:left;
    width:200px;
}
ul#mainmenu li a {
    color:#000;
    display:block;
    font-family:"HelveticaNeueLight45", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:normal;
    padding-left:10px;
    margin-left:-10px;
    text-decoration:none;
    width:189px
}
ul#mainmenu li a:hover, ul#mainmenu li.current-menu-item a, ul#mainmenu li.current-page-ancestor a {
    background:url(images/navbg.png) no-repeat 5px 50%;
}

Answer 1

This is the “mysterious space between list items” that sometimes shows up in IE. Often it happens when the list item and link inside have different display types, or hasLayout is inconsistently applied. But the whole scenario is affected by a combination of display, line-height, and hasLayout. 🙂

This gets them all to the same starting point (or it does in IE7, which is what I have at the moment.) I think the big issue for you was that you set #mainmenu and #mainmenu a to display:block but had left #mainmenu li at its default.

#mainnavcont {
    float:right;
    width:673px;
}
#mainmenu, #mainmenu li, #mainmenu a {
    display:block;
    margin:0;
    padding:0;
    line-height:1;
    list-style:none;
}
#mainmenu {}
    #mainmenu li {}
        #mainmenu a {
            margin-left:-10px;
            padding-left:10px;
            color:#000;
            font-family:"HelveticaNeueLight45", "Trebuchet MS", Arial, Helvetica, sans-serif;
            font-size:12px;
            font-weight:normal;
            text-decoration:none;
        }
            #mainmenu a:hover, #mainmenu .current-menu-item a, #mainmenu .current-page-ancestor a {
                background:url(images/navbg.png) no-repeat 5px 50%;
            }

You can see some examples of various situations where this occurs by viewing http://www.brunildo.org/test/IEWlispace.php in IE. At the bottom of that site he mentions various fixes for various causes.

If this doesn’t get you all the way there also check out:

http://gtwebdev.com/workshop/gaps/white-space-bug.php

There are some other solutions out there as well, but I can’t find my favorite reference right now. 🙁

Related Tip

If you end up needing more rules for just IE7 or IE6, check out this method of http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ targeting IE.

Unrelated Tip:

If you don’t absolutely need the tag name to increase your rule’s specificity, it’s best to omit it. Not just because it makes your selectors shorter, but because of the way browsers parse and apply CSS. They start at the end of the rule, so in

ul#mainmenu li a

Worst case scenario the browser: finds all a, checks for li parents, checks for #mainmenu parents, and then checks that #mainmenu is a ul. This is superfluous and inefficient, especially when you add in the fact that element selectors are (according to browser vendors) less efficient than classes and ids. (Which means if you have a class like .menu-item on the li it’s better to use that in your selector than li.)