[CSS:]Problem mit Liste in IE

[maceis]

hallo zusammen,

habe auf einem Seitenentwurf eine Art verschachtelte Liste in der Navigation.
In Safari wird alles wie geünscht dargestellt im IE werden ohne mir rekennbaren Grund zwei Unterpunkte (der erste und der letzte) zur Seite gerückt.

Hier mal ein Bild davon:

Der Quellcode (Ausschnitt) sieht so aus:

<div id="navi">
<ul>
    <li><a href="/hintergruende/einleitung.html" title="#">Hintergründe</a></li>
</ul>
<ul class="sub">
    <li><a href="/hintergruende/einleitung.html" title="#">- Teil 1</a></li
    ><li><a href="/hintergruende/ziele.html" title="#">- Teil 2</a></li
    ><li><a href="/hintergruende/verfahren.html" title="#">- Teil 3</a></li
    ><li><a href="/hintergruende/soz_situation.html" title="#">- Teil 4</a></li
    ><li><a class="active" href="/hintergruende/ergebnisse.html" title="#">- Teil 5</a></li>
</ul>
<hr />
<ul>
    <li><a href="/kontakt.html" title="#">Kontakt</a></li>
    <li><a href="/impressum.html" title="#">Impressum</a></li>
</ul>
</div>

(Die Forensoftware verhaut die Zeilenumbrüche, wenn ich mit HTML formatiere)
CSS:

#navi ul {
    list-style: none;
    margin :0;
    padding: 0;
}

#navi li {
    margin: 5px;
    border: 1px solid #339;
    padding: 0px;
    background-color: #ccddff;
    font-weight: bold;
}
#navi a {
    text-decoration: none;
    display: block;
    color: #000;
}
#navi a.active {
    color: #f33;
}
(...)
#navi ul.sub {
    border: 1px solid #339;
    border-top-color: #ccddff;
    margin: -6px 5px 0 25px; 
}
#navi ul.sub li{
    border-width: 0;
    margin: 0;
    padding-left: 5px;
}
#navi ul.sub li a {
    border-width: 0;
    font-weight: normal; 
}
#navi ul.sub li a.active {
    font-weight: bold;
}

Hat jemand 'ne Ahnung, wie ich die beiden Elemente linksbündig mit den anderen bekomme?

Danke im voraus.

Gruß
maceis

 

[2nd]

Hi Kollega

Kannst Du mal das CSS-Teil dazu posten?

2nd

 

[maceis]

Ah - ganz vergessen.
Hab's oben noch eingefügt.

 

[maceis]

Langsam krieg ich nen Krampf.

Jetzt hab' ich das Ganze nochmal neu geschrieben mit der Folge, dass im IE 5 die beiden ersten und der letzte Punkt (Teil 1, Teil 2 u. Teil 5) leicht nach rechts gerückt sind während im IE 6 nur der erste und der letzte "verschoben" sind (Teil 1, Teil 5).

Das darf doch wohl nicht wahr sein
Selbst wenn ich die ganze Liste in eine einzige Zeile schreibe, bekomme ich die Versprünge rein *ääächz*.

Hat vielleicht jemand noch eine Idee?

 

[ThaHammer]

Es gibt im CSS noch die Optionen für Listen, Inline und Outline glaube ich war das. Da geht es zwar drum wo die Listenpunkte erscheinen, aber eventuell hilft Dir das weiter? Es gibt ja den List-Type und dazu die Position!

 

[maceis]

Inzwischen habe ich herausgefunden, wie ich das Problem umgehen kann.
Im Bereich des verminderten Abstandes links fügt der IE zusätzliche borders ein mit negativem padding.

Scheint ein Bug zu sein; zumindest kann ich nicht herausfinden, woher die borders kommen.

Ich kann sie aber durch einführen einer zusätzlichen Klasse in den <li>-Elementen auf 0 setzen, dann passt die Sache wieder.

 

[ThaHammer]

IE ist ein einziger Bug

 

[little_pixel]

Hallo maceis,

ich stand vor wenigen Tagen vor dem gleichen Problem.
Auf allen anderen Bowsern ist das Erscheinungsbild einwandfrei.
Nur nicht im IE.

Meine Lösung:
Ausnahme Anweisungen nur für den "Internetzersprenger".

Es ist extra Arbeit, aber ca. 80% nutzen nun mal den IE.


Viele Grüße

 

[maceis]

Das ist in diesem Fall (zum Glück) nicht notwendig, da die zusätzlich erforderlichen Anweisungen das Erscheinungsbild in anderen Browsern nicht nachteilig beeinflussen.