Firefox only: :last-child::after { clear:left; } geht nicht?

[MudGuard]

Hi,

da es um ein lokales Dokument geht, reicht es vollkommen, wenn es im Firefox funktioniert (wenn's in anderen Browsern zusätzlich funktioniert, ist's schön).

im HTML:

  
<ul id="test">  
<li>dummy</li> <li>dummy</li> <li>dummy</li> <li>dummy</li>  
<li>dummy</li> <li>dummy</li> <li>dummy</li> <li>last</li>  
</ul>  

(also eine ganz normale Liste mit ein paar Einträgen).

dazu folgendes CSS:

  
#test { margin:0; padding:0; border:3px solid red; }  
#test li { list-style-type:none; float:left; width:10em; border:3px solid green; }  
#test li:last-child:after { clear:left; float:none; }  

Ich verpasse der ul also eine rote Border.
Die li kriegen eine Breite und eine border und floaten links.
Nach dem letzten li soll ein clear-endes Pseudo-Element kommen - da das m.E. innerhalb des ul liegt, sollte es dafür sorgen, daß das ul so groß wird, daß alle li-Elemente innerhalb des Rahmens sind (wegen des float wäre das ja normalerweise nicht der Fall).

Am Selektor kann es nicht liegen, füge ich z.B. noch ein content:"bla"; im letzten Ruleset hinzu, wird das angezeigt (direkt hinter "last").
Das "bla" müßte aber m.E. wegen clear:left unter den li stehen.

Ich finde keine Einschränkung bzgl. der Verwendung von clear für generated content ...

Klar, ich könnte der Liste auch als letztes Item ein
<li class="superfluousbreaker"></li>
mit
.superfluousbreaker { clear:left; float:none; border:none; width:0; height:0; overflow:hidden; }
verpassen, aber ich wollte eigentlich auf das überflüssige Element im Dokument verzichten.

Was übersehe ich?

cu,
Andreas

[wahsaga]

hi,

Ich finde keine Einschränkung bzgl. der Verwendung von clear für generated content ...

Aber für clear findest du die Einschränkung:
"Applies to:   block-level elements"

Was übersehe ich?

Dass generated content m.W. per Default immer display:inline hat.

gruß,
wahsaga

[MudGuard]

Hi,

Aber für clear findest du die Einschränkung:
"Applies to:   block-level elements"

Was übersehe ich?

Dass generated content m.W. per Default immer display:inline hat.

Ein display:block; für den generated content verändert zwar was, aber nicht so, wie ich es wünsche ...
Der generated content steht dann innerhalb des li unter dem Inhalt des li (wie wegen display:block ja auch zu erwarten wäre, wenn das ganze float-Zeug nicht wäre)
Das clear wirkt aber nach wie vor nicht.

cu,
Andreas

[wahsaga]

hi Andreas,

Ein display:block; für den generated content verändert zwar was, aber nicht so, wie ich es wünsche ...
Der generated content steht dann innerhalb des li unter dem Inhalt des li (wie wegen display:block ja auch zu erwarten wäre, wenn das ganze float-Zeug nicht wäre)
Das clear wirkt aber nach wie vor nicht.

Also zumindest laut Position Is Everything: How To Clear Floats Without Structural Markup sollte das so funktionieren - zumindest, wenn dein generated content auch wirklich etwas content hat - im Beispiel dort wird ja ein simpler Punkt verwendet.

Bezieht sich deine Aussage jetzt also auf den ursprünglichen Versuch mit :after ohne eine Angabe zu content, oder auf den mit content:"bla"?

Irgendeinen Inhalt muss man (nach meiner Lesart) wohl per content erzeugen - denn sonst würde dafür lediglich der Default 'normal' angenommen, und für den definiert die Spec "Computes to 'none' for the :before and :after pseudo-elements" - und 'none' wiederum impliziert "The pseudo-element is not generated". Also gibt es wohl ganz ohne content-Angabe gar kein generiertes Element, auf dass du clear überhaupt anwenden könntest.

gruß,
wahsaga

[MudGuard]

Hi,

Position Is Everything: How To Clear Floats Without Structural Markup sollte das so funktionieren - zumindest, wenn dein generated content auch wirklich etwas content hat - im Beispiel dort wird ja ein simpler Punkt verwendet.

#test { margin:0; padding:0; border:3px solid red; }  
#test li { list-style-type:none; float:left; width:10em; border:3px solid green; }  
#test li:last-child::after { clear:both; float:none; content:"."; display:block; background:yellow; }

ist der aktuelle code.

Und das ist das, was ich sehe:

cu,
Andreas

[Axel Richter]

Hallo,

Ein display:block; für den generated content verändert zwar was, aber nicht so, wie ich es wünsche ...
Der generated content steht dann innerhalb des li unter dem Inhalt des li (wie wegen display:block ja auch zu erwarten wäre, wenn das ganze float-Zeug nicht wäre)
Das clear wirkt aber nach wie vor nicht.

Ja, Du fügst ein Block-Level-Element _innerhalb_ des letzten LI-Elements an dessen _Ende_ an. Beachte das "element's content" in:
The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.

Du solltest ein Block-Level-Element _innerhalb_ des UL-Elements an dessen _Ende_ anfügen

#test { margin:0; padding:0; border:3px solid red; }
#test li { list-style-type:none; float:left; width:10em; border:3px solid green; }
#test:after { content:""; display:block; clear:left; }

viele Grüße

Axel

[MudGuard]

Hi,

Du solltest ein Block-Level-Element _innerhalb_ des UL-Elements an dessen _Ende_ anfügen

Ah - da fällt es mir wie Schuppen aus den Haaren ...

#test { margin:0; padding:0; border:3px solid red; }
#test li { list-style-type:none; float:left; width:10em; border:3px solid green; }
#test:after { content:""; display:block; clear:left; }

Funxzt ;-)

cu,
Andreas

[Axel Richter]

Hallo,

#test { margin:0; padding:0; border:3px solid red; }
#test li { list-style-type:none; float:left; width:10em; border:3px solid green; }
#test:after { content:""; display:block; clear:left; }
Funxzt ;-)

*g*

Dass ein ebenfalls gefloatetes UL-Element seine Höhe auch um die gefloateten LIs ausdehnen würde, ist aber klar, oder?

viele Grüße

Axel

[MudGuard]

Hi,

#test { margin:0; padding:0; border:3px solid red; }
#test li { list-style-type:none; float:left; width:10em; border:3px solid green; }
#test:after { content:""; display:block; clear:left; }
Funxzt ;-)
*g*

Dass ein ebenfalls gefloatetes UL-Element seine Höhe auch um die gefloateten LIs ausdehnen würde, ist aber klar, oder?

Ja, aber das ul kann ich aus anderen Gründen nicht floaten lassen.

cu,
Andreas

[wahsaga]

hi,

Dass ein ebenfalls gefloatetes UL-Element seine Höhe auch um die gefloateten LIs ausdehnen würde, ist aber klar, oder?

Ja, aber das ul kann ich aus anderen Gründen nicht floaten lassen.

Und die Wunderwaffe overflow magst du an dieser Stelle auch nicht abfeuern?

gruß,
wahsaga

[MudGuard]

Hi,

Dass ein ebenfalls gefloatetes UL-Element seine Höhe auch um die gefloateten LIs ausdehnen würde, ist aber klar, oder?
Ja, aber das ul kann ich aus anderen Gründen nicht floaten lassen.
Und die Wunderwaffe overflow magst du an dieser Stelle auch nicht abfeuern?

Nö. ;-)

cu,
Andreas

[Ashura]

Hallo.

Ich wundere mich gerade ein wenig.

Bin ich der einzige, bei dem der Text der Titelzeile des Browsers folgendermaßen aussieht?

Dies tritt bei allen meinen Browsern auf, im Quelltext ist aber alles in Ordnung …

Einen schönen Montag noch.

Gruß, Ashura

[Ashura]

Hallo Gunnar™.

Bin ich der einzige, bei dem der Text der Titelzeile des Browsers folgendermaßen aussieht?

Vermutlich, da hier gewiss ein Bug in der verwendeten Schriftart (HeldustryFTVBasic) vorliegt. Bei anderen besteht der Fehler nicht.

Einen schönen Montag noch.

Gruß, Ashura