Container Pseudo Element

[Xemiron]

Wenn man ein Layout ohne Footer verwendet und den Layout Builder eingebunden hat, entsteht nach dem .container div durch das Pseudo-Element mit dem content: "." ein Rand am Ende der Seite.

[leofeyer]

Lässt sich das nicht mittels display:none ausblenden?

[Xemiron]

Danke für den Tipp. Der Fehler lässt sich mit display:none beheben.
Wäre es dann nicht besser, standardmäßig im Layout Builder statt display:block, display: none zu verwenden?

[tristanlins]

Nein, wenn man das Element mit display: none ausblendet verliert es seine Funktionalität. Das Element wird ja als float break workaround verwendet. (wenn es das Element ist, von dem ich ausgehe)

[leofeyer]

Korrekt. Man könnte höchstens überlegen, die CSS-Anweisung dynamisch in das Markup zu schreiben, wenn es keinen Footer gibt.

[HellPat]

Why not use " " instead... it works fine.
See http://nicolasgallagher.com/micro-clearfix-hack/

[leofeyer]

Wegen mir gerne. @Xemiron könntest Du bitte kurz bestätigen, dass das Problem mit dem Micro-Clearfix-Hack nicht auftritt?

[Xemiron]

@leofeyer Ja das Problem tritt mit dem Micro-Clearfix-Hack nicht mehr auf.

[leofeyer]

Der Patch wäre dann:

/**
 * Custom layout sections
 */
.custom {
    display:block;
}
#container:before,.custom:before,#container:after,.custom:after {
    content:" ";
    display:table;
}
#container:after,.custom:after {
    clear:both;
}

Brauchen wir wirklich :before und :after? Die bisherige Lösung kam nur mit :after aus.

@contao/workgroup-core

[leofeyer]

@Xemiron Könntest Du hierzu bitte noch kurz ein Feedback geben?

[Xemiron]

@leofeyer Der Patch funktioniert einwandfrei.

[leofeyer]

@Xemiron Die Frage war, ob wir die :before-Anweisungen wirklich brauchen. Funktioniert es ohne auch?

[Xemiron]

@leofeyer Ja es funktioniert auch ohne :before-Anweisung

[HellPat]

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

Look at 2. I'm not sure...

[leofeyer]

I've run tests with every major browser, even with the official demo, but neither using block instead of table nor entirely removing the :before statement had any effect at all. The top margin of the child elements remained.

@may17 @JanoschSkuplik Am I missing something?

[HellPat]

Is it a real problem to have 1 Pseude-Element more?
The micro-clearfix is well tested by thousands of websites and it works. Why adjust it?

[leofeyer]

I don't want to add any changes which break the backwards compatibility. How do you know the additional pseudo element doesn't do exactly this?

[HellPat]

Because I use this clearfix in every of my contao projects and it work's in every mayor browser.
How do you know it doesn't break BC if you don't use the :before Pseudo-Element?

[leofeyer]

I don't. That is why I keep asking people :)

[HellPat]

👍

[bekanntmacher]

How can I reproduce that exactly in the online demo? I would make a test with about 80 systems/browsers combinations.

[leofeyer]

Changed in 40840cc then.

[fritzmg]

content:" ";

Ist gar nicht notwendig, es reicht auch

content:"";

Siehe http://css-tricks.com/snippets/css/clear-fix/

Die einfachste Version des clearfix ist

.cf:after {
  content:"";
  display:block;
  clear:both;
}

Und wenn man IE 6/7 compatibility auch noch benötigt, dann zusätzlich

.cf {
    zoom:1;
}

:before und "." sollte in den restlichen, aktuellen Browser Versionen nicht mehr benötigt werden.