Problem mit der Darstellung bei relativen Angaben (em)

[mikey]

Moin !

mein Problem, ich habe identische relative Breitenangaben für
2 Elemente, aber sie werden verschieden breit dargestellt

kleines Code-Schnippsel

* {
padding: 0;
margin: 0;
}
body {
text-align: center;
background-color: #ececec;
font-family: Arial, arial, sans-serif;
font-size: 100.01%;
}
div.test {
width: 20em;
height: 2em;
background-color: red;
}
h1 {
font-size: 1.6em;
font-weight: normal;
letter-spacing: 0.9em;
width: 20em;
text-align: left;
background-color: #ddddff;
}

im HTML code dann

<h1>Test</h1>
<div class="test"></div>

und zumindest bei mir (IE 6.0.2) sind h1 und div verschieden breit

wenn ich nun die Schriftgröße des H1 auf 1em runtersetze, sind beide
Elemente gleichbreit, setze ich sie auf 0.8em wird das H1 Element
tatsächlich kleiner als das DIV (das offenbar 1em als Initialwert besitzt?)

meine Fragen

Ist das vom Browser so korrekt dargestellt ?

Warum ist das so ? (CSS Vererbung ..eigentlich hier ja nicht?)

Wie kann man das verhindern ohne zusätzliche DIVs/Spans zu benutzen ?

MfG
Micha

[Ingo Turski]

Hi,

Ist das vom Browser so korrekt dargestellt ?

Ja.

Warum ist das so ? (CSS Vererbung ..eigentlich hier ja nicht?)

weil Du über em eine Breite relativ zur Schriftgröße angegeben hast.

Wie kann man das verhindern ohne zusätzliche DIVs/Spans zu benutzen ?

Einfaches Umrechnen: 20em/1.6em = 12.5em.

freundliche Grüße
Ingo

[mikey]

weil Du über em eine Breite relativ zur Schriftgröße angegeben hast.

? würde bedeuten das bei einer Schriftgrößenangabe das komplette
Wertebezugssystem mitverändert wird

letter-spacing wär ja noch irgendwie verständlich, aber Breite ? Höhe ? Außenabstand ? Rahmendicke ? oder doch nur die Breite ?(warum auch immer..und vor nach der Konsistenz frag ich gar nicht erst)

ein padding-left: 0.5em für ein Element mit font-size : 1.6em wäre also "mehr", als dasselbe padding für ein Element mit einfacher Schriftgröße ??
(ist übrigens bei mir NICHT so)

falls hier jemand die entsprechende Stelle (oder ein passendes Schlagwort) in der CSS Spezifikation des W3C für mich hat, wär ich sehr dankbar

[Ingo Turski]

Hi,

? würde bedeuten das bei einer Schriftgrößenangabe das komplette
Wertebezugssystem mitverändert wird

Ja. Das ist der Sinn der relativen Einheit em. Falls Du Signaturen abgeschaltet hast: meine Seite http://www.1ngo.de/web/em.html könnte Dir einige Fragezeichen nehmen...

freundliche Grüße
Ingo

[MudGuard]

Hi,

? würde bedeuten das bei einer Schriftgrößenangabe das komplette
Wertebezugssystem mitverändert wird

Ja, das ist der Sinn der Sache.
Wenn Du ein Kästchen hast, in den bei 10em Breite Dein Text reinpaßt, dann kann der User seine gewünschte Schriftgröße einstellen und der Text wird immer noch in das Kästchen passen.

letter-spacing wär ja noch irgendwie verständlich, aber Breite ? Höhe ? Außenabstand ? Rahmendicke ? oder doch nur die Breite ?(warum auch immer..und vor nach der Konsistenz frag ich gar nicht erst)

Damit der User problemlos die Schriftgröße ändern kann, ohne daß sich Teile der Seite plötzlich überlappen oder aus dem Rahmen fallen ...

ein padding-left: 0.5em für ein Element mit font-size : 1.6em wäre also "mehr", als dasselbe padding für ein Element mit einfacher Schriftgröße ??
(ist übrigens bei mir NICHT so)

Dann ist Dein Browser kaputt.

falls hier jemand die entsprechende Stelle (oder ein passendes Schlagwort) in der CSS Spezifikation des W3C für mich hat, wär ich sehr dankbar

http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-length

cu,
Andreas

[Marc]

Moin moin

Dann ist Dein Browser kaputt.

Da fällt mir gerade ein: kennt jemand eine gute Browser-Werkstatt im Raum Köln Bonn, wo ich meinen IE mal tieferlegen lassen kann? (Für alle, die daamals schon echte Männer waren)

SCNR...

Gruß,
Marc.

[MudGuard]

Hi,

Da fällt mir gerade ein: kennt jemand eine gute Browser-Werkstatt im Raum Köln Bonn, wo ich meinen IE mal tieferlegen lassen kann? (Für alle, die daamals schon echte Männer waren)

Kann man den IE auf ein noch niedrigeres Niveau bringen als das, was er schon hat? ;-)

cu,
Andreas

[mikey]

falls hier jemand die entsprechende Stelle (oder ein passendes Schlagwort) in der CSS Spezifikation des W3C für mich hat, wär ich sehr dankbar

http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-length

vielleicht kann mir ja nochmal jemand bei der korrekten Interpretation helfen

"
Relative units are:

em: the 'font-size' of the relevant font
ex: the 'x-height' of the relevant font
px: pixels, relative to the viewing device
"

mein Fazit daraus (und der darunterstehenden Erklärungen)

"em" als Breitenangabe wird ggf. durch die im selben (oder Eltern-) Element angegebenen font-size Angabe verändert, ergo im selben Element
gilt

width:20em ist je nach font-size Angabe unterschiedlich

"ex" ist zwar relativ, aber nur auf die Schriftart bezogen
(damit eigentlich unbrauchbar oder ?)

theoretisch würde also eine "ex" Breitenangabe unabhängig von
der font-size gesetzt werden, praktisch ist die Wirkung genauso
wie bei "em" (grad getestet)

..das mag daran liegen, dass für das W3C

"em: the 'font-size' of the relevant font
ex: the 'x-height' of the relevant font "

eigentlich dasselbe bedeutet, (oder war es das Gleiche ?)

nur halt

em = Laufweite M inkl. font-size + Bezugswertänderung für Breite, etc.

ex = Höhe klein X inkl. font-size + Bezugswertänderung für Breite,etc.

vielleicht eine Lösung meines Problemes

Wenn alle Breiten- / Abstandsangaben in EM auf denselben Bezugswert berechnet werden sollen, ist es nötig den Inhalt der
jeweiligen Elemente nochmals extra mit einer font-size Angabe zu
versehen, damit der gewünschte Bezugswert (hier "em" für body) nicht verändert wird

je nach Elternelement wäre dann

<h1 style="width: 20em;">
  <span style="font-size: 1.6em;">TEXT</span>
</h1>

genauso breit wie

<div style="width: 20em"></div>

...bezogen auf das H1 Element muß ich demnach einen Tod sterben, entweder DIV drumherum oder SPAN innendrin...dabei wollt ich doch Code sparen =)

[wahsaga]

hi,

mein Fazit daraus (und der darunterstehenden Erklärungen)
[...]
eigentlich dasselbe bedeutet, (oder war es das Gleiche ?)

hast du dir ingos seite mal angeschaut, wo er die bedeutungen m.E. ganz gut erklärt hat?

<h1 style="width: 20em;">
  <span style="font-size: 1.6em;">TEXT</span>
</h1>
genauso breit wie
<div style="width: 20em"></div>

warum berücksichtigst du ingos vorschlag nicht, einfach umzurechnen? (pisa-generation durch dreisatz überfordert ...?)

gruß,
wahsaga

[mikey]

warum berücksichtigst du ingos vorschlag nicht, einfach umzurechnen? (pisa-generation durch dreisatz überfordert ...?)

lass dich mal von "mikey" nicht täuschen, die "Pisa-Generation" ist von mir vielleicht sogar weiter entfernt als von dir, ich bin eher die "Apollo-Generation"

wie auch immer, klar ich könnte jedesmal die korrekten Werte für
die Breite in Abhängigkeit von der Schriftgröße berechnen

das entspricht aber nicht meiner Zielsetzung, ich will eben nichts berechnen (müssen) sondern ein Layout, was "fluide" und anpassbar ist und trotzdem gewisse Designer-Vorgaben einhält, dazu noch
ein simples html sowohl als auch css besitzt

Beispiel gefällig ?

semantische Struktur

H1
 H2
  H3
   H4

durch diverse optische Mittel unterstützt(font-size...), aber mit der Vorgabe, ALLE Inhalte (hier ists Text) sollen genau den gleichen Abstand nach links haben ohne ein Mutterelement dafür zu gebrauchen (body mit padding-left würde ja sich anbieten, aber weitere Probleme erzeugen)

....

Ingos Seite (Dank an dieser Stelle) ist ein gutes Beispiel für meinen Mangel an Zeit und dem Mangel an (schneller) Nutzbarkeit (s)einer Seite...es war eben nicht so leicht zu finden/verstehen, demnach hab ichs "übersehen" und nochmal nachgefragt =)

ich bin faul und gelobe Besserung

[mikey]

»»... sollen genau den gleichen Abstand nach links haben ...

Abstand natürlich mittels relativer Angabe

[wahsaga]

hi,

wie auch immer, klar ich könnte jedesmal die korrekten Werte für
die Breite in Abhängigkeit von der Schriftgröße berechnen

das entspricht aber nicht meiner Zielsetzung, ich will eben nichts berechnen (müssen) sondern ein Layout, was "fluide" und anpassbar ist und trotzdem gewisse Designer-Vorgaben einhält, dazu noch
ein simples html sowohl als auch css besitzt

und erwähntes

<h1 style="width: 20em;">
  <span style="font-size: 1.6em;">TEXT</span>
</h1>

ist dann das "simple" HTML ...?

komm schon, das ist nicht dein ernst.

gruß,
wahsaga

[mikey]

komm schon, das ist nicht dein ernst.

...nie behauptet, wie so oft ist ein Kompromiss nötig, und da stellt
sich die Frage, was ist einfacher (bezogen auf den Bedarf)

berechnen ? (..lassen, Design soll später per php anpassbar sein)

oder

eine (noch) überschaubare Menge von Elementen von außen oder innen
mit div/span ausstatten ?

de facto zählt der ROI, also wird einfach der Bedarf entfernt
(weil nice to have und im Notfall auch später einsetzbar)

*lach* muß ich doch gleich mal nachschauen, ob css 3 diese besondere Anforderung erfüllen kann

[Ingo Turski]

Hi,

"ex" ist zwar relativ, aber nur auf die Schriftart bezogen
(damit eigentlich unbrauchbar oder ?)

theoretisch würde also eine "ex" Breitenangabe unabhängig von
der font-size gesetzt werden, praktisch ist die Wirkung genauso
wie bei "em" (grad getestet)

Nein. ex bezieht sich (leider) auf die nicht so genau wie em definierte "x-height", was dazu führt, daß (auch browserabhängig) der Schriftgrad _und_ die Schriftart herangezogen werden. Hierzu habe ich auch eine kleine Testseite: http://www.1ngo.de/web/ex.html. Fazit: ex ist in en meisten Fällen nicht brauchbar, em dagegen schon.

em = Laufweite M inkl. font-size + Bezugswertänderung für Breite, etc.

nix Laufweite... font-Höhe.

<h1 style="width: 20em;">
  <span style="font-size: 1.6em;">TEXT</span>
</h1>

Wenn schon, dann fände ich ein DIV mit Breitenangabe um H1 noch besser. Nur sinnvoll isdt beides nicht, sondern die Berücksichtgung des Schriftgrades bei der Breitenangabe. Du solltest Dir zu Weihnachten vielleicht einen Taschenrechner schenken lasssen? ;-)
Wo siehst Du darin bloß ein Problem oder gar eine unzureichende Flexibilität? Du defnierst für H1 ohnehin Schriftgrad und Breite und ...

...bezogen auf das H1 Element muß ich demnach einen Tod sterben, entweder DIV drumherum oder SPAN innendrin...dabei wollt ich doch Code sparen =)

... hast kein Byte zusätzlichen Code.

freundliche Grüße
Ingo