Browserverhalten

[Auge]

Hallo

Also, wenn ich beim FF z.B. auf Strg + klicke, wird die Schrift so groß, dass sie nicht mehr in die grauen Streifen passt.  Ich glaube das war  class="quer2". Die habe ich im CSS mit height:3%; definiert - glaube ich. Und die wachsen bei der Erhöhung des Schriftgrades nicht mit.

Du hast eine _feste_ Höhe von 3% der Höhe des Browserfensters (genauer der Höhe des Anzeigebereichs: Viewport) vergeben. daran hält sich der Firefox. Wenn der Inhalt dort nicht hinein passt, und du nichts zu overflow angegeben hast, ragt er halt über den Rand hinaus.

Im IE und Opera tun sie das.

Der IE ignoriert die Höhenangabe, wenn zuviel des Inhalts da ist. Er erweitert dann die Box, so dass alles hinein passt. Dazu stellt CSS eigentlich eine andere Eigenschaft, nämlich min-height, bereit. Die kennt der IE nicht, Firefox und Opera hingegen schon. Allerdings kennt der Opera, für bestimmte Dinge, auch einen "MSIE-Kompatibilitätsmodus", den er hier offensichtlich anwendet.

Wenn du, wie Ingo schon ansprach, die Höhenangaben weglässt, wird den Boxen immer so viel Höhe gegeben, dass alles reinpasst. Und das in jedem Browser.

Wenn ich noch zwei bis drei mal auf Strg + (im FF) klicke, zieht sich auch der innere Bereich im content-Teil über die unten liegenden Div's hinaus. Jedenfalls wird's zerschossen.

Da das oben gesagte (feste Höhe) für alle deine Elemente gilt, gilt auch die Konsequenz (Inhalt ragt aus der Box) für alle Elemente.

Sollte ich das besser mit "em" statt mit "%" machen? Das kapiere ich alles noch nicht so richtig.

Für Elemente, deren Proportionen immer gleich sein sollen, bietet sich em als Maßeinheit an. Allerdings würde ich Höhenangaben sehr sparsam setzen. Wie gesagt, ohne Höhenangabe wird jedem Element die für seinen Inhalt notwendige Höhe zugestanden.

Übrigens - Feinarbeiten habe ich da noch nicht gemacht, weil ich mit dem Groben schon nicht klar komme ;-)

Eins nach dem anderen. :-)

Tschö, Auge