Schriftgröße wird mit Datum automatisch immer kleiner

[Bflat]

Hi!

Auf der Homepage für eine Band habe ich auf der Startseite/Newsseite für jeden neuen Post eine Tabellenzeile, die mit dem aktuellen Datum beginnt.

Seit einiger Zeit erscheinen nun ältere Posts mit abnehmend kleinerer Schriftgröße. Das möchte ich nicht, weiß jemand wie ich das verhindern kann?

Ich verstehe das Phänomen nicht. Müsste eine Darstellungssache des Browsers (Firefox und Chrome) sein. Kennt jemand das Problem?

Danke im voraus!

[MrMurphy1]

Hallo,

auf der Seite sind die Texte in span-Elementen ineinander verschachtelt. So ein Konstrukt ist für diese Art von Darstellung nicht vorgesehen.

Zur Schriftgröße: Die Schriftgröße wird von Elternelementen zu Kindelementen vererbt.

Die 90% beziehen sich demnach immer auf die Schriftgröße in dem übergeordneten Element. Das zieht sich auf der Seite dann durch, die Schrift wird immer kleiner.

Um das zu vermeiden benötigst du eine Einheit für die Schriftgröße, die sich nicht vererbt. Das sind zum Beispiel px oder rem.

Im Endeffekt ist es aber sinnvoller und bewährter auf solche Verschachtelungen zu verzichten, also gleichartige Beiträge auf gleicher Ebene einzutragen. Und für die notwendigen Verschachtelungen Elemente zu nutzen, die dafür gedacht sind.

Gruss

MrMurphy

[JürgenB]

Hallo,

keine Ahnung, warum sich die Schriftgröße verändert, aber das ist auch das kleinste Problem:

Validator

Und das Tabelle-in-Tabelle-Layout ist auch nicht gerade der Brüller.

Gruß Jürgen

[Matthias Apsel]

Hallo Bflat,

Seit einiger Zeit erscheinen nun ältere Posts mit abnehmend kleinerer Schriftgröße. Das möchte ich nicht, weiß jemand wie ich das verhindern kann?

Du hast definiert:

#text3 {
    font: 90% Tahoma,Arial;
}

Da du nun mehrere solcher Abschnitte ineinander geschachtelt hast, (was nicht erlaubt ist, jede ID darf es nur ein einziges Mal im Dokument geben) ist jedes folgende 10% kleiner.

Die Angabe für die Schrift ist insgesamt auch fehlerhaft. Siehe https://wiki.selfhtml.org/wiki/font

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

#text3 {
    font: 90% Tahoma,Arial;
}

Die Angabe für die Schrift ist insgesamt auch fehlerhaft. Siehe https://wiki.selfhtml.org/wiki/font

Was genau sollte daran fehlerhaft sein? Ich kann keinen Fehler entdecken.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

#text3 {
    font: 90% Tahoma,Arial;
}

Die Angabe für die Schrift ist insgesamt auch fehlerhaft. Siehe https://wiki.selfhtml.org/wiki/font

Was genau sollte daran fehlerhaft sein? Ich kann keinen Fehler entdecken.

Die fehlende generische Schriftartenfamilie.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Was genau sollte daran fehlerhaft sein? Ich kann keinen Fehler entdecken.

Die fehlende generische Schriftartenfamilie.

“Authors are encouraged to append a generic font family as a last alternative for improved robustness.” [CSS-FONTS-3]

Encouraged to, nicht forced to. Ich würde keine Angabe einer generische Schriftartenfamilie nicht „Fehler“ nennen.

LLAP 🖖

[dedlfix]

Tach!

Seit einiger Zeit erscheinen nun ältere Posts mit abnehmend kleinerer Schriftgröße. Das möchte ich nicht, weiß jemand wie ich das verhindern kann?

Ich verstehe das Phänomen nicht. Müsste eine Darstellungssache des Browsers (Firefox und Chrome) sein. Kennt jemand das Problem?

Die anderen Antworten haben dir ja schon was zum Fehler gesagt. Aber wie findet man nun selbst solche und viele andere Fehlerursachen?

Man nehme die in den Browsern eingebauten Debugging-Tools und schaue sich an, was der Browser aus dem gemacht hat, was er bekommt. Rechtsklick und Element untersuchen. Du wirst dabei feststellen, dass deine Text-span-Elemente nicht mehr gleichberechtigt in einer Ebene stehen sondern ineinander geschachtelt dargestellt werden. Bist du nun in der Lage, die eigentliche Ursache zu finden?

dedlfix.

[bflat]

Wow, und wow und wow, tatsächlich, Firefox hat einen Debugger!

Habe mich schon längere Zeit nicht mehr damit auseinandergesetzt. So gehts halt wenn man von überall Sachen zusammenkopiert und aufhört, sobald es so aussieht wie man will. Meine HTML-Kenntnisse sind einfach steinalt.

Leute vielen Dank für die Hilfe!!!