Schriftgrössen in Formularelementen

[Noooooooooooos]

Hi miteinander

Ich habe ein Problem mit der Schriftgrösse(font-size-Stil) in Textfeldern/Buttons. Mit 9px Grösse wird die Schrift gleich gross dargestellt, wie das auch ausserhalb des Elements geschehen würde. Doch verwende ich 10px oder mehr, sieht die Schrift eine Stufe grösser aus, als sie mit 10px ausserhalb wäre.

Ich teste die Seite mit IE 8 im Transitional-Mode.

Ich frage mich, ob das so normal ist und wie man Abhilfe verschafft. Ist es ein Browserproblem oder muss man nur spezielle Eigenschaften einstellen?

Gruss
Noooooooooooooos

[Der Martin]

Hallo,

Ich habe ein Problem mit der Schriftgrösse(font-size-Stil) in Textfeldern/Buttons. Mit 9px Grösse wird die Schrift gleich gross dargestellt, wie das auch ausserhalb des Elements geschehen würde. Doch verwende ich 10px oder mehr, sieht die Schrift eine Stufe grösser aus, als sie mit 10px ausserhalb wäre.

bei den spärlichen Informationen kann ich nur raten - und ich rate mal, dass die Schrift in den Formularelementen fett dargestellt wird, und als normaler Fließtext nicht. Bestimmte Kombinationen von Schriftgröße und -gewicht unterscheiden sich am Bildschirm halt deutlicher als andere. Sieht so aus, als würde 9px fett und 9px normal recht ähnlich aussehen, während man 10px fett und 10px normal deutlich unterscheiden kann.

So long,
 Martin

[Noooooooooooos]

Die Elemente haben eine feste Grösse. Auch wenn ich diese unbestimmt lasse, besteht das Problem.
Ich vergleiche  nicht Fettes mit Unfettem.
Bei Google Chrome passts wie es sein sollte.

So sieht mein Textfeld aus:
<input id="kuerzel" type="text" name="kuerzel" maxlength="10" tabindex="2" style="font-size:11px; height:12px; border:1px solid #00b233; width:70px">

Bin ich überhaupt an dieser falschen Darstellung Schuld und kann ich da etwas machen? Welche weiteren Angaben wären Euch  noch nützlich?

Gruss
Nooooooooooooos

[Rainer]

Hallo,

So sieht mein Textfeld aus:
<input id="kuerzel" type="text" name="kuerzel" maxlength="10" tabindex="2" style="font-size:11px; height:12px; border:1px solid #00b233; width:70px">

sofern ich mich richtig erinnere gehen Browser unterschiedlich mit dem Rand um. Manche nehmen in von der angegeben Höhe weg, andere machen ihn dran.

Höhe 12px
Texthöhe 11px, Rand 1px(_aber_ oben und unten, also 2px) mach schon mal 13px

Ob es an sowas liegt kann ich dir nun auch nicht sagen, aber genau genommen...

Gruß Rainer

[Nooooooooooooos]

Ja, der IE rechnet den Rand+Padding auch dazu, jedoch nur im Quirks-Mode. Ich habe es trotzdem mal mit erzwungenen 20px probiert, was jedoch nichts änderte.

Bemerkt ihr dieses Phänomen auch, oder bin ich irgendwie daran Schuld?

Gruss
Noooooooooooos

[EKKi]

Mahlzeit Rainer,

<input id="kuerzel" type="text" name="kuerzel" maxlength="10" tabindex="2" style="font-size:11px; height:12px; border:1px solid #00b233; width:70px">

Was mir auffällt: Du gibst hier keine explizite Schriftart (oder -familie) an. So weit ich weiß, erben Formularelemente ihre Schrifart jedoch *nicht* von ihren Elternelementen ... könnte es vielleicht sein, dass Du nur *ähnliche*, nicht jedoch *gleiche* Schriftarten verwendest (globales Stylesheet, Browser-Stylesheet usw.)?

MfG,
EKKi

[Matthias Apsel]

Om nah hoo pez nyeetz, Noooooooooooos!

Ich teste die Seite mit IE 8 im Transitional-Mode.

Schau es dir doch mal mit anderen Browsern an.

Ich vermute, es hängt damit zusammen, dass der Button in Abhängkeit von der Schriftgröße ebenso verkleinert oder vergrößert wird, sodass es sich um ein Rendering-Problem handelt (und dabei eine Rundungsgeschichte ist), was du imho nicht beeinflussen kannst.

Matthias