✔ ul > li > ul > li Abstände im IE?

[Dalerion]

Hi all,

ich habe jetzt das Forum durchsucht. Die Frage wurde auch schon mal gestellt, allerdings konnte ich keine Antwort darauf finden, daher frage ich einfach nochmal:

Ich habe eine UL - Liste definiert. Ein Punkt dieser Liste besitzt Unterpunkte. Diese sollen dich beieinander sein, ohne Abstand. Im FF wird es mir auch ohne Probleme angezeigt, aber im IE natürlich wieder mal nicht...

ul.navigation li, li.withsub {
    background: url(images/dreieck_blau10.gif) no-repeat 0 3px;
    padding-left: 11px;
    vertical-align: text-top;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #396594;
    margin-bottom: 1em;
    position:relative;
    left: -3.2em;
}

ul.navigation li.withsub {
    margin-bottom: 0px;
}

ul.navigation li.withsub ul {
    margin-bottom: 1em;
}

ul.navigation li.withsub ul li {
    background: none;
    margin: 0px;
    margin-left: -5em;
    position: static;
}

Und das dazugehörige HTML:

<div id="mainnav"> 
  <ul class="navigation">
    <li>Home</li>
    <li><a href="http://secure-neuseelandhaus.de" target="_blank">Zum Shop</a></li>
    <li class="withsub">Forum
    <ul>
        <li>- <a href="http://www.australien-forum.net" target="_blank">Australien</a></li>
        <li>- <a href="http://www.honig-forum.de" target="_blank">Honig</a></li>
        <li>- <a href="http://www.naturkosmetik-forum.de" target="_blank">Naturkosmetik</a></li>
        <li>- <a href="http://www.neuseelandforum.net" target="_blank">Neuseeland</a></li>
        <li>- <a href="http://www.wein-forum.org" target="_blank">Wein</a></li>
    </ul></li>
    <li><a href="links10.htm">Links</a></li>
    <li><a href="http://www.neuseeland-newsletter.de" target="_blank">Newsletter</a></li>
    <li><a href="http://www.manuka-produkte.de/links10.htm">Pressestelle</a></li>
    <li><a href="main10.htm">Wir über uns</a></li>
    <li><a href="liefer-info10.htm">Kundeninfos</a></li>
    <li><a href="datenschutz10.htm">Datenschutz</a></li>
    <li><a href="datenschutz10.htm">Impressum</a></li>
  </ul>

Immer wieder Probleme mit dem IE, wann sieht Microsoft es endlich ein und liefert den Firefox mit Windows aus....

Gruß Dale

 

[Maik]

Probier es mal mit diesem Stylesheet:

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11px;
    color: #396594;
}

ul.navigation li, li.withsub {
    background: url(images/dreieck_blau10.gif) no-repeat 0 3px;
    padding-left: 11px;
    vertical-align: top;
    margin-bottom: 1em;
    position:relative;
    left: -3.2em;
}

ul.navigation li.withsub {
    margin-bottom: 0px;
}

ul.navigation li.withsub ul {
    margin-bottom: 1em;
}

ul.navigation li.withsub ul li {
    background: none;
    margin: 0px;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: -5em;
    position: static;
}

 

[Dalerion]

Danke erstmal für deine Antwort. Hätte ich auch schon schreiben können. Mit padding-top, padding-bottom bzw. margin-top und -bottom habe ich es schon versucht.
Wie gesagt, im FF stehen die Punkte schön direkt untereinander, nur der IE lässt einen Abstand dazwischen.... :-(

 

[Maik]

Hast du meinen Lösungsvorschlag schon getestet?

Bei mir funktioniert der CSS-Code einwandfrei und führt in allen mir zur Verfügung stehenden Browsern zum gleichen Ergebnis. Und das sogar ohne die padding-top- und padding-bottom-Angaben

Testumgebung: Win2000, Firefox 1.5, IE 6.0, Mozilla 1.7, Netscape 7.0, Opera 8.5

Der Grund liegt bei dir zum einen in dem Wert text-top für die vertical-align-Eigenschaft und zum anderen in der Auswahl der Selektoren für die Schriftformatierung.

 

[Dalerion]

Ja, habe deine Angaben übernommen, bzw. eingesetzt in meine Lösung. Danke nochmals... Ist mein erstes CSS-Layout, da kann ich jeden Tipp gebrauchen.... Also soweit funktioniert es... Allerdings sind die Abstände zwischen den Untermenüpunkten bei mir im IE immer noch größer, als im FF und ich hätte sie gerne so, wie im FF...

Gruß Dale

// edit

Juchu! Vielen Dank nochmal! Ich hatte deine Angaben zwar genommen, aber auch kopieren, lesen und aufpassen will gelernt sein! Ich hatte irgendwo noch eine font-size drin! Nun funktioniert es...

Oh Mann, bei meinem ersten TYPO3 - Projekt hatte ich die CSS-Dateien fest vorgegeben. Ich merke schon, selbst entwickeln ist nochmal eine andere Liga...

Gruß Dale