iframe zwei Zeilen höher als nötig
bearbeitet von
Hallo Linuchs,
> Mit Element untersuchen habe ich es nicht gefunden:
Ich aber. Sogar im Firefox. Es ist basis.css, Zeile 320.
~~~css
header::after, .main::after, footer::after {
content: "";
display: block;
clear: both;
}
~~~
Das `display:block` bringt das ::aften Hr-Pseaudoerlement auf eine eigene Zeile und belegt die Höhe. Brauchst Du das display für irgendwas? Ich hab's weggenommen und - schwups - die Höhe hat gestimmt.
Verzichte auf Float-Layout und nimm Flexbox oder Grid um die beiden p nebeneinander zu bekommen, dann brauchst Du auch keine clear-Hacks.
Füge hinzu (bzw. integriere in die existierende footer-Regel):
~~~css
footer {
display: flex;
justify-content: space-between;
}
~~~
Lösche die float-Styles für: `footer p:nth-of-type(1)`, `footer p:nth-of-type(2)` und nimm in Zeile 320 das `footer::after` aus dem Selektor.
Das ist alles. Funktioniert mit jedem relevanten Brauser (alles vor IE11 ist völlig irrelevant, IE11 ist marginal relevant). In veralteten Browsern stehen die Zeilen ggf. untereinander. So what? Die Seite funktioniert trotzdem.
Wenn Du basis.css für Millionen anderer Seiten verwendest, dann klone sie, nenn den Klon basis_v2.css, ersetze alle float-Konstrukte durch Flexbox, sofern sinnvoll und möglich, und bau neue Seiten nur damit.
_Rolf_
--
sumpsi - posui - obstruxi
> Mit Element untersuchen habe ich es nicht gefunden:
Ich aber. Sogar im Firefox. Es ist basis.css, Zeile 320.
~~~css
header::after, .main::after, footer::after {
content: "";
display: block;
clear: both;
}
~~~
Das `display:block` bringt das ::afte
Verzichte auf Float-Layout und nimm Flexbox oder Grid um die beiden p nebeneinander zu bekommen, dann brauchst Du auch keine clear-Hacks.
Füge hinzu (bzw. integriere in die existierende footer-Regel):
~~~css
footer {
display: flex;
justify-content: space-between;
}
~~~
Lösche die float-Styles für: `footer p:nth-of-type(1)`, `footer p:nth-of-type(2)` und nimm in Zeile 320 das `footer::after` aus dem Selektor.
Das ist alles. Funktioniert mit jedem relevanten Brauser (alles vor IE11 ist völlig irrelevant, IE11 ist marginal relevant). In veralteten Browsern stehen die Zeilen ggf. untereinander. So what? Die Seite funktioniert trotzdem.
Wenn Du basis.css für Millionen anderer Seiten verwendest, dann klone sie, nenn den Klon basis_v2.css, ersetze alle float-Konstrukte durch Flexbox, sofern sinnvoll und möglich, und bau neue Seiten nur damit.
_Rolf_
--
sumpsi - posui - obstruxi
iframe zwei Zeilen höher als nötig
bearbeitet von
Hallo Linuchs,
> Mit Element untersuchen habe ich es nicht gefunden:
Ich aber. Sogar im Firefox. Es ist basis.css, Zeile 320.
~~~css
header::after, .main::after, footer::after {
content: "";
display: block;
clear: both;
}
~~~
Das `display:block` bringt den Header auf eine eigene Zeile und belegt die Höhe. Brauchst Du das display für irgendwas? Ich hab's weggenommen und - schwups - die Höhe hat gestimmt.
Verzichte auf Float-Layout und nimm Flexbox oder Grid um die beiden p nebeneinander zu bekommen, dann brauchst Du auch keine clear-Hacks.
Füge hinzu (bzw. integriere in die existierende footer-Regel):
~~~css
footer {
display: flex;
justify-content: space-between;
}
~~~
Lösche die float-Styles für: `footer p:nth-of-type(1)`, `footer p:nth-of-type(2)` und nimm in Zeile 320 das `footer::after` aus dem Selektor.
Das ist alles. Funktioniert mit jedem relevanten Brauser (alles vor IE11 ist völlig irrelevant, IE11 ist marginal relevant). In veralteten Browsern stehen die Zeilen ggf. untereinander. So what? Die Seite funktioniert trotzdem.
Wenn Du basis.css für Millionen anderer Seiten verwendest, dann klone sie, nenn den Klon basis_v2.css, ersetze alle float-Konstrukte durch Flexbox, sofern sinnvoll und möglich, und bau neue Seiten nur damit.
_Rolf_
--
sumpsi - posui - obstruxi