✔ IE-Probleme mit ul-Menü

[Sebastian Wramba]

Moin,

hab mich nun in die Welt der ul-Menüs eingearbeitet. Nun ist der IE 6 ja der Feind jedes Webmasters.

Was passiert ist: Ich habe mein Menü für den Firefox optimiert und der IE zeigt murks an. Abhilfe schaffte mir dann die FAQ von xhtmlforum.de.

Mit

* html .menu a {
 height:1px;
}

hatte sich dann alles erledigt. Jetzt ist allerdings das Problem, dass Untereinträge nicht über die gesamte Breite angezeigt werden.

Hier mal der Code:

<ul class="menu">
<!-- ... -->

<li id="current" class="parent active item15"><a href="/index.php?option=com_content&amp;view=article&amp;id=12&amp;Itemid=15"><span>Wer macht was?</span></a>

<ul>
  <li class="item17"><a href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=2&amp;Itemid=17"><span>Initiativen</span></a></li>
 <li class="item16"><a href="/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=1&amp;Itemid=16"><span>Institutionen</span></a></li>
 <li class="item14"><a href="/index.php?option=com_content&amp;view=section&amp;id=5&amp;Itemid=14"><span>Organisationen</span></a></li></ul>
</ul>

</li>
<!-- ... -->
</ul>

Und nun das relevante CSS dafür:

.menu {
 list-style:none;
 text-align:left;
 padding:0px;
 margin:0px 0px 20px 0px; 
}

.menu li {
  line-height:14px;
}

.menu li a {
 color:#000000;
 display:block;
 padding:2px 10px 2px 5px;
}


.parent ul {
 list-style-type:none;
 padding:0px;
 background-color:#dddddd;
}

.parent li a {
 display:block;
 padding:2px 10px 2px 20px;
}

Hat jemand eine Ahnung, warum im Firefox die Unterpunkte (.parent ul) über die gesamte Breite angezeigt werden und im IE nicht?

 

[Maik]

Hi,

ich würde es auf die Polsterungseigenschaft des Listenelements zurückführen:

.parent ul {
 list-style-type:none;
 padding:0px;
 margin:0;
 background-color:#dddddd;
}

 

[Sebastian Wramba]

Wheeeee, danke.

 

[hela]

Hallo Sebastian,
dein HTML-Quelltext ist nicht wohlgeformt:

<ul class="menu">
   <!-- ... -->
   <li id="current" class="parent active item15"><a href="#"><span>Wer macht was?</span></a>
      <ul>
         <li class="item17"><a href="#"><span>Initiativen</span></a></li>
         <li class="item16"><a href="#"><span>Institutionen</span></a></li>
         <li class="item14"><a href="#"><span>Organisationen</span></a></li></ul>
      </ul>
   </li>
   <!-- ... -->
</ul>