IE rendert (mal wieder) etwas falsch

[Konrad Rudolph]

Hallo Forum,

ich habe eine einfache unsortierte Liste, die allerdings einige Elemente mit Unter-Listen enthält. Das sieht so aus:

\\ ...
    <ul>
        <li>
            <ul>
                <li>Hallo</li>
                <li>Du</li>
            </ul>
        </li>
    </ul>
...
///

das Problem dabei: Mozilla & Opera rendern das so, daß die untergeordnete Liste direkt ans obere Element anschließt. IE läßt da allerdings eine Zeile frei (vor dem "Hallo"), egal, ob der umschließende <li>-Tag einen eigentlichen Inhalt hat oder nicht (wie hier).
Die Leerzeile soll weg, genauso wie im Mozilla/Opera. Margin & Padding beeinflussen das scheinbar nicht.

Gruß,
KonRad -

[Sönke Tesch]

ich habe eine einfache unsortierte Liste, die allerdings einige Elemente mit Unter-Listen enthält.

das Problem dabei: Mozilla & Opera rendern das so, daß die untergeordnete Liste direkt ans obere Element anschließt. IE läßt da allerdings eine Zeile frei

Füge mal

border-style:solid;
  border-color:green;

für <li> bzw. <ul> ein und staune.

Gruß,
  soenk.e

[Konrad Rudolph]

Füge mal

border-style:solid;
  border-color:green;

für <li> bzw. <ul> ein und staune.

ok, gestaunt habe ich.
Fakt ist:

Wenn der Rahmen um <ul> und <li> ist, klappt es (d.h. die Störzeile ist weg).
Wenn allerdings _nur_ um die <ul>s herum ist und _kein_ Border um die <li>s, dann ist die Störzeile wieder da.

Aber leider kann ich bei meiner Site keinen Border verwenden. Gibt es da nicht ein anderes Workaround?

Gruß,
KonRad -

[phase]

hi konrad,

kannst du dann nicht einfach  border-color:transparent; schreiben??

phase

[XaraX]

hi konrad,

abgesehen davon, kannst Du mit CSS auch das marign-Verhalten von "<ul>" und "<li>" beeinflussen ;)

Gruß aus Berlin!
eddi

[Konrad Rudolph]

abgesehen davon, kannst Du mit CSS auch das marign-Verhalten von "<ul>" und "<li>" beeinflussen ;)

aha ;-)
ok, hier mein CSS-Ausschnitt, so, wie er zur Zeit ist (#menu ist das Parent-ul):

\\ #menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 87px;
}
#menu ul {
    list-style: none;
    border-top: 1px solid #E9E4DC;
    margin: 0;
    padding: 0;
}

#menu li {
    font-variant: small-caps;
    font-size: 13px;
    height: 20px;
    margin: 0;
    padding: 0;
    letter-spacing: 2px;
}

#menu ul li {
    border-bottom: 1px solid #E9E4DC;
    height: 18px;
    letter-spacing: 0;
}
///

-> sowohl Padding als auch Margins sind gesetzt, ohne Resultat.

Gruß,
KonRad -

[Scooter]

Hi,

vielleicht, weil es ein Block-Element ist. Nach einem <form> machen die meisten Browser auch einen Abstand. Lösung dafür ist es als Inline-Element darzustellen:

ul, li {display:inline}

versuchs mal.

Gruß
Scooter

[Konrad Rudolph]

Hi,

ul, li {display:inline}

war ein guter Ansatz - leider funktioniert der auch nicht. display:inline für die verursacht lediglich, daß die Borders ignoriert werden.

Gruß,
KonRad -

[Candid Dauth]

Hallo du da draußen,

-> sowohl Padding als auch Margins sind gesetzt, ohne Resultat.

sie sind ja beide auf 0 gesetzt. Wenn dir das so nicht passt, kannst und darst du auch negative Werte angeben, also zum Beispiel -12px. Musst halt rausfinden, mit welchem Wert es so aussieht, wie du es wünschst.

Grüße von hier drinnen, aus Biberach an der Riss (http://www.stadt-biberach.de/),
Candid Dauth (Dogfish)

[Konrad Rudolph]

Hallo,

sie sind ja beide auf 0 gesetzt. Wenn dir das so nicht passt, kannst und darst du auch negative Werte angeben, also zum Beispiel -12px. Musst halt rausfinden, mit welchem Wert es so aussieht, wie du es wünschst.

naja, aber dann ist das Design im Mozilla/Opera ja wieder Murks!

Gruß,
KonRad -

[fastix®]

Moin!

<ul>
        <li>
            <ul>
                <li>Hallo</li>
                <li>Du</li>
            </ul>
        </li>
    </ul>

das Problem dabei: Mozilla & Opera rendern das so, daß die untergeordnete Liste direkt ans obere Element anschließt. IE läßt da allerdings eine Zeile frei (vor dem "Hallo"), egal, ob der umschließende <li>-Tag einen eigentlichen Inhalt hat oder nicht (wie hier).

Falsch! Ich sehe zumindest einen Zeilenumbruch und ein paar Leerzeichen. Der IE wohl auch.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Konrad Rudolph]

Falsch! Ich sehe zumindest einen Zeilenumbruch und ein paar Leerzeichen. Der IE wohl auch.

Die sind egal. Wenn man die alle wegläßt (also alle Whitespaces) ändert sich an der Anzeige absolut nix.
So gehört sich's auch.
Außerdem habe ich Erfahrungen, daß Mozilla sehr viel mehr Probleme mit Whitespaces macht als der IE.

Gruß,
KonRad -