Schriftgröße verschiebt div

[Sabine]

Hallo!

Vorinformation:
Mein Grundlegendes Layout besteht aus div-Blöcken (die Breiten sind in "em" angegeben - die ganze Seite "div#seite" ist 60em breit) und ich definiere in jedem Block eine andere Schriftgröße in "em".

Nun habe ich folgendes Phänomen:
Im div-Block "inhalt" habe ich Schriftgröße 1em eingestellt. Stelle ich um auf 1.1em, so wird der div-Block riesig und alles, was vorher links daneben stand (also das Menü) verschiebt sich nach unten.

Hier der essentielle Quellcode:

  
div#inhalt{  
 float:right;  
 width:49em;  
 margin-top: 1.5em;  
 font-size: 1em;  
 color: #800000;  
}  
div#navi{  
 float:left;  
 width:10em;  
 margin-top: 1.5em;  
 border: 2px solid yellow;  
}  

Leider blieb meine Suche nach dem Fehler bisher erfolglos oder ich sehe vor lauter Wald die Bäume nicht mehr. Wo liegt der Fehler oder habe ich einen grundlegenen logischen Fehler im Aufbau?

lg

Sabine

[Der Martin]

Hallo Sabine,

Im div-Block "inhalt" habe ich Schriftgröße 1em eingestellt. Stelle ich um auf 1.1em, so wird der div-Block riesig und alles, was vorher links daneben stand (also das Menü) verschiebt sich nach unten.

das hört sich ganz danach an, als hättest du das in einem IE getestet. Der hat schon seit langer Zeit einen Bug in der Schriftskalierung, wahrscheinlich eine Art Rundungsfehler. Abhilfe schafft man in der klassischen Variante mit

body
  { font-size: 100.1%;
  }

im zentralen Stylesheet.

Schönes Wochenende,
 Martin

[Sabine]

Hallo Martin!

das hört sich ganz danach an, als hättest du das in einem IE getestet. Der hat schon seit langer Zeit einen Bug in der Schriftskalierung, wahrscheinlich eine Art Rundungsfehler. Abhilfe schafft man in der klassischen Variante mit

Leider ist das kein IE spezifisches Problem, es tritt auch im Firefox, Opera und Netscape auf.

body
  { font-size: 100.1%;
  }

im zentralen Stylesheet.

Hab ich versucht, leider erfolglos!

lg

Sabine

[Sabine]

Hallo!

Bin grade draufgekommen, wie ich das Problem umgehen kann, ich habe einfach alles in "p"-tags gepackt und die mit einer entsprechenden Schriftgröße versehen.

Jetzt funktionierts!

Mich würde aber trotzdem interessieren, warum ich die Schriftgröße nicht gleich im div angeben kann!

lg

Sabine

[D.R.]

Hi,

»»die ganze Seite "div#seite" ist 60em breit) und ich definiere in jedem Block eine andere Schriftgröße in "em".

Ich finde es erstmal gut, dass du dafür em statt px nimmst, da kann man das wenigstens zommen (im Firefox und IE). Aber meinst du nicht dass 60em ziemlich viel sind? Falls es nicht anders geht, OK. Aber vergiss nicht, dass es auch Angaben in % gibt. Dann passt sich die Seite gleich der Fenstergröße an.

Einen schönen Samstag noch!

[Sabine]

Hi!

Ich finde es erstmal gut, dass du dafür em statt px nimmst, da kann man das wenigstens zommen (im Firefox und IE). Aber meinst du nicht dass 60em ziemlich viel sind? Falls es nicht anders geht, OK. Aber vergiss nicht, dass es auch Angaben in % gibt. Dann passt sich die Seite gleich der Fenstergröße an.

Nachdem ich schon so oft von dem Problem mit px hier gelesen habe, habe ich daraus gelernt und nutze em-Angaben. Ich werde mir die Idee mit den % durch den Kopf gehen lassen und mal ausprobieren.

Danke für die Idee!

lg

Sabine

[Ingo Turski]

Hi,

die ganze Seite "div#seite" ist 60em breit)

...

width:49em;

->  font-size: 1.1em;
...

width:10em;
border: 2px solid yellow;

...

rechnen wir mal: 49*1.1 = 53.9 +10 = 63.9 + ~0.125 = ~64em.
Wie sollte diese Breite in den 60em Platz finden?

Du brauchst aber auch nicht stattdessen allen Elementen eine Breite geben, sondern mußt lediglich den Faktor berücksichtigen, z.B. 45em:
45*1.1 = 49.5 +10 = 59.5 +  ~0.125 = ~59.625em

freundliche Grüße
Ingo

[Sabine]

Hallo Ingo!

rechnen wir mal: 49*1.1 = 53.9 +10 = 63.9 + ~0.125 = ~64em.
Wie sollte diese Breite in den 60em Platz finden?

Du brauchst aber auch nicht stattdessen allen Elementen eine Breite geben, sondern mußt lediglich den Faktor berücksichtigen, z.B. 45em:
45*1.1 = 49.5 +10 = 59.5 +  ~0.125 = ~59.625em

Tja, da hat man Mathematik studiert und kommt nicht drauf, dass es ein einfaches Rechenproblem ist! (*schäm*).

Jetzt ist alles klar!

Danke!