IE 7/8: Abstand zwischen ul und li bzw div fehlt

[michat]

Hi

die genannten Fehler treten nur im IE 7/8 auf. Die kommen wohl beide mit den  Abständen der (sehr verschachtelten) Listen nach unten nicht zurecht. Wenn ich mein eigenes CSS Chaos richtig durchblicke liegt das an

ul li ul:last-child { margin-bottom: 2em; }

Vermutlich beherrschen die alten IEs kein last-child? Richtig? Wie dann?

Der IE7 hat noch ein weiteres Problem, und zwar wird die gesammte rechte Spalte zu weit nach links gerückt. Dafür habe ich überhaupt keine Erklärung, aber wenn ich mich recht entsinne tritt dieser Fehler erst auf seitdem ich mit

overflow: visible;

in der mittleren Spalte für überfließenden Text gesorgt habe. Da bin ich mit meine Tests noch nicht durchgestiegen.

Ich kann das alles nur über netrenderer testen. Gott sei dank gibt es wenigsten diese Möglichkleit, aber es ist schon zeitaufwendig.

bye

MH

[misterunknown]

Moin,

ul li ul:last-child { margin-bottom: 2em; }
Vermutlich beherrschen die alten IEs kein last-child? Richtig? Wie dann?

Can I use last-child? Wie du es anders machst, kann ich dir nicht sagen, da ich prinzipiell den IE nicht unterstütze. Es gibt Javascript-Bibliotheken, die CSS3 für älte IEs bringen; wie gut das funktioniert entzieht sich meiner Kenntnis.

Der IE7 hat noch ein weiteres Problem, und zwar wird die gesammte rechte Spalte zu weit nach links gerückt. Dafür habe ich überhaupt keine Erklärung, aber wenn ich mich recht entsinne tritt dieser Fehler erst auf seitdem ich mit
overflow: visible;
in der mittleren Spalte für überfließenden Text gesorgt habe. Da bin ich mit meine Tests noch nicht durchgestiegen.

Das wird ein ähnliches Problem sein, aber das müsstest du genauer beschreiben; auch die SelfHTML-CSS-Experten sind keine Hellseher ;)

Grüße Marco

[michat]

JS möchte ich dazu (:last-child) nicht nutzen müssen. Gibt es keinen Hack oder Conditional Comment, der dies ermöglicht?

Das wird ein ähnliches Problem sein, aber das müsstest du genauer beschreiben; auch die SelfHTML-CSS-Experten sind keine Hellseher ;)

hellsehen ist hier nicht gefragt, die Seite ist ja verlinkt.

bye

MH

[Rainer]

hellsehen ist hier nicht gefragt, die Seite ist ja verlinkt.

Wo?

Gruß Rainer

[bubble]

Wo?

Da *drauf zeig*

Der folgende Beitrag wurde am 05. Februar 2013, 15:30 Uhr von michat veröffentlicht.
Website: http://wk.ac52.de

Im Kopfbereich der Antwort von michat

MfG
bubble

[Gunnar Bittersmann]

@@michat:

nuqneH

ul li ul:last-child { margin-bottom: 2em; }

Vermutlich beherrschen die alten IEs kein last-child? Richtig?

Richtig.

Wie dann?

Vielleicht mit 'margin-top' und ':first-child'?

Qapla'

PS: ':first-child' dürfte auch generell performanter sein als ':last-child'. War vielleicht der Grund, warum es in CSS 2 ':first-child' schon gab, ':last-child' aber nicht.

[michat]

Hi
[IE8 Fehler nicht mehr auf verlinkter Seite!]

Den IE8 Fehler konnte ich durch Verzicht der Verwendung von :last-child (und Definition der Abstände durch übergeordnete Elemente) nun vermeiden. Ein nicht ganz so differenzierte/differenzierbare Darstellung, aber auch nicht wirklich wesentlich.

Den zweiten Fehler, den nur der IE7 zeigt, habe ich noch nicht identifiezieren können:
Und zwar wird die gesammte rechte Spalte zu weit nach links gerückt. Dafür habe ich überhaupt keine Erklärung, aber wenn ich mich recht entsinne tritt dieser Fehler erst auf seitdem ich mit

overflow: visible;

in der mittleren Spalte für überfließenden Text gesorgt habe. Da bin ich mit meine Tests noch nicht durchgestiegen.

Ich kann das alles nur über netrenderer testen. Gott sei dank gibt es wenigsten diese Möglichkleit, aber es ist schon zeitaufwendig.

bye

MH

bye

MH

[micha aka michat]

Hi

niemand ne idee hierfür?

Und zwar wird die gesammte rechte Spalte zu weit nach links gerückt.

[michat]

Hi

bei meine Bemühungen das Layout IE7/8 kompatibel zu machen hänge ich nun fest. Es gelingt mir nicht einen allgemein definierten Rand für ul durch gezielte Wahl eines geeigneten Selektors zurüch auf "0" zu setzen.

Testseite hier (Hauptseite hat abweichendes css!)

mittels

ul li {
  margin-top: 1.8em; outline: red solid 1px; }
 ul li ul li{
  margin-top: 0.1em; }

ist der obere Abstand des ul Elements allgemein definiert. Ich möchte in #navigation den oberen Abstand des ersten ul-Elements auf 0 setzen, aber dies gelingt mir weder mit div#navigation ul, div#navigation > ul, #navigation > ul, #navigation ul, noch mit dementsprechenden :first-child zusammensetzungen.

Wodurch wird dies verhindert?

bye

MH

[michat]

Hi

Hi

bei meine Bemühungen das Layout IE7/8 kompatibel zu machen hänge ich nun fest. Es gelingt mir nicht einen allgemein definierten Rand für ul durch gezielte Wahl eines geeigneten Selektors zurüch auf "0" zu setzen.

Testseite hier (Hauptseite hat abweichendes css!)

mittels

ul li {
margin-top: 1.8em; outline: red solid 1px; }
ul li ul li{
margin-top: 0.1em; }

ist der obere Abstand des ul Elements allgemein definiert. Ich möchte in #navigation den oberen Abstand des ersten ul-Elements auf 0 setzen, aber dies gelingt mir weder mit div#navigation ul, div#navigation > ul, #navigation > ul, #navigation ul, noch mit dementsprechenden :first-child zusammensetzungen.

Wodurch wird dies verhindert?

bye

MH

bye

MH

[michat]

Hi

die Lösung besteht darin, dass

<ul>text</ul> etwas anderes ist als <ul><li>text</text</ul>

Unter den hier anzutreffenden Umständen kommt es nämlich zu einem kollabieren von Abständen nach *unten*. Doch taucht dieser durch Kollaps entstanden Abstand nirgends als berechneter/ausgewiesener Abstand auf (Opera/Dragonfly; FF/"Dingens, na ihr wißt schon") weswegen ich mir nun stundenlang nen Wolf gesucht habe.
Gefunden habe ich dann, dass es eben nicht genügt die allgemein Vorgaben für das ul-Element zu überschreiben, sondern es müssen auch die Vorgaben für das li-Element überschrieben werden. Eigentlich selbstverständlich. Da jedoch der obere Rand des !leeren! ul-Elements nach unten zum li-Element kollabiert (weil letzteres einen nicht überschriebenen Abstand mitbringt) ist es nicht offensichtlich, das der nun vorhanden Abstand nicht durch das ul-Element erzeugt wird, sondern durch das untergeordnete li-Element.

Das sieht nach einem BUG in der DOM Darstellung aus. Wenn der Abstand zum div da ist, dann müsste das li-Element das ul-Element nach oben aufspannen. Und irgendwo müßte eine ererbter Abstand auftauchen. Aber alle oberen Margins und Paddings für das betreffende ul- und li Element werden mit "0" berechnet. Das ist definitiv falsch.

Kommentare?

bye

MH

[Siri]

Hallo,

<ul>text</ul> etwas anderes ist als <ul><li>text</text</ul>

<ul>text</ul> ist nicht etwas anderes, sondern in erster Linie ungültiges HTML.

Viele Grüße
Siri

[Linksetzer_]

<ul>text</ul> etwas anderes ist als <ul><li>text</text</ul>

[Linksetzer_]

<ul>text</ul> etwas anderes ist als <ul><li>text</text</ul>

http://validator.w3.org