IE6 und IE7 Navigation Spacing Problem

Question

Ich habe ein Problem mit dem Menüabstand in IE7 und IE6, die ich nicht richtig aussehen kann.

Meine Navigation kann bei http://js.philosophydesign.com

http://www.philosophydesign.com/downloads/menuspacing.png

Wie Sie in IE8 und andere sehen es zeigt in Ordnung zu finden. IE7 die Menüpunkte sind teilweise getrennt, aber in IE6 sind sie sehr getrennt.

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%; 
} 

Wer weiß, warum dieses Menü in IE7 und IE6 wirkt auf?

Dank

Scott

EDIT: Hab ihn mit diesem CSS arbeiten:

/**** 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

Dies ist der „geheimnisvolle Raum zwischen Listenelement“, die manchmal in IE auftauchen. Häufig passiert es, wenn das Listenelement und der Link darin unterschiedliche Anzeigetypen haben oder hasLayout inkonsistent angewendet wird. Das gesamte Szenario wird jedoch von einer Kombination aus Anzeige, Zeilenhöhe und hasLayout beeinflusst. :-)

Das bringt sie alle zum selben Startpunkt (oder in IE7, was ich gerade habe.) Ich denke, das große Problem für Sie war, dass Sie #mainmenu und #mainmenu a einstellen um anzuzeigen: block aber hatte #mainmenu li auf seinem Standard verlassen.

#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%; 
      } 

Sie können einige Beispiele für verschiedene Situationen sehen, wo diese durch http://www.brunildo.org/test/IEWlispace.php in IE sehen auftritt. Am Ende dieser Seite erwähnt er verschiedene Korrekturen für verschiedene Zwecke.

Wenn dies nicht bekommen Sie den ganzen Weg auch Besuche:

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

Es gibt einige andere Lösungen gibt, wie gut, aber ich kann nicht mein Lieblingsreferenz jetzt finden. :-(

Verwandte Tip

Wenn Sie mehr Regeln für nur IE7 oder IE6, lesen Sie in dieser Methode der http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ Targeting IE am Ende brauchen.

Unrelated Tipp:

Wenn Sie nicht unbedingt den Tag-Namen benötigen Regel die Spezifität zu erhöhen, ist es am besten, es zu unterlassen. Nicht nur, weil es Ihre Selektoren kürzer macht, sondern weil Browser CSS analysieren und anwenden. Sie beginnen am Ende der Regel so in

ul#mainmenu li a 

Worst-Case-Szenario der Browser: findet alle ein, prüft, ob li Eltern, Schecks für #mainmenu Eltern, und dann überprüft, ob #mainmenu ein ul ist. Dies ist überflüssig und ineffizient, insbesondere wenn Sie hinzufügen, dass Elementselektoren (laut Browser-Anbietern) weniger effizient sind als Klassen und IDs. (Was bedeutet, wenn Sie eine Klasse wie .menu-Element auf der li haben es besser ist, dass als li in Ihren Wählern zu verwenden.)

Answer 2

Ein paar Dinge, die ich auf den 'Vertikalen Abstand oder Leer Bug' Abschnitt this article basierte Prüfung würde die hat einige nette Beispiele - es hat normalerweise etwas mit Margen, Padding und Floating/Clearing zu tun, um alles schön und konsistent über den Browser zu bekommen.

HTH

Answer 3

I line-height:1; für .menu-item nähme Einstellung wird das Problem beheben (vielleicht ist line-height:1 nicht genau das, was Sie brauche, spiele mit den Werten, vielleicht 1.25 ist die beste)