iframe zwei Zeilen höher als nötig

[Rolf B]

Hallo Linuchs,

Mit Element untersuchen habe ich es nicht gefunden:

Ich aber. Sogar im Firefox. Es ist basis.css, Zeile 320.

header::after, .main::after, footer::after {
  content: "";
  display: block;
  clear: both;
}

Das display:block bringt das ::after-Pseudoelement 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):

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. Bzw. schmeiß die Regel ganz raus - header und .main verwenden ja keine Float.

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 auch für andere Seiten verwendest, dann klone die Datei, nenne den Klon basis_v2.css, ersetze alle float-Konstrukte durch Flexbox, sofern sinnvoll und möglich, und bau neue Seiten nur damit.

Rolf