✔ IE Passwordfeld 2px grösser als Textfeld

[Joe]

Hallo alle.

Ich verstehe nicht so ganz weshalb es in Firefox keine Unterschiede gibt und in IE leicht verschoben ist. Der IE scheint da sehr sensibel auf nicht koreckte Syntax zu reagieren.
Weiss jetzt eben nur nicht genau was falsch sein könnte. Auch fehlt der Cursor wenn man in die Felder klickt. Im FF blinkt der Cursor so wie es sollte.

<div id="login">
<form action="index.php?section=login" method="post">
<h2>Login</h2>
<h2>
		<input type="text"  style="border: 1px solid black; background-color: grey; color:#FFFFFF; font-face:Verdana; font-weight:bold; font-size:8pt" size="13" name="Username" />
		<input type="password"  style="border: 1px solid black; background-color: grey; color:#FFFFFF; font-face:Verdana; font-weight:bold; font-size:8pt" size="13" name="Password" />
		<input type="submit" style="font-family: Verdana; font-size: 8pt" name="formaction" value="OK" />
</h2>
</form>
</div>

Wäre nett wenn ihr mir nen Hinweiss geben könntet.
Grüsse Joe.

 

[SpiceLab]

Ich empfehle dir den Artikel Styling form controls im Allgemeinen, und Styled single line text inputs im Speziellen, der eindrucksvoll vorführt, dass die einzelnen Formularelement-Typen sich nicht betriebssystem- u. browserübergreifend in einem einheitlichen Erscheinungsbild formatieren lassen.

In deinem Fall rechnet IE die deklarierten Rahmenstärken zur Elementbreite/-höhe hinzu, "2 * 1px = 2px" ;-)

 

[Joe]

Also macht der IE Unterschiede zwichen Password-feldern und Textfeldern?
Dann müsste ich ja irgendwie das Passwordfeld von der Grösse her um ein 1Px abschneiden. Wie ist das denn machbar? Ich möchte ja schon das Beide Felder einen 1Px schwarzen Rahmen haben (und von gleicher Gesamtgrösse sind).

Für mich klingt das nach einem Bug von IE.

PS: nicht das wir aneinander vorbei reden. Im FF sind beide Felder genau gleich. Im IE ist das PW-Feld 1PX grösser als das Textfeld. Die Unterschiedliche Darstellung verschiedener Browser ist nicht schlimm nur wenn eben die Syncronität der Felder abweicht je nach Browser ists problematisch.

 

[SpiceLab]

Für mich klingt das nach einem Bug von IE.

Klar, der olle IE, der nix kann, ausser immer und überall für Bugs zu sorgen

Die anderen Browser sind dann gleichermaßen und mind. genauso viel "buggy", wie himself, wenn du einfach deren Interpretationen mit FF vergleichst, und seine Darstellung für dich das Maß der Dinge ist ;-)

Nochmal zur Erläuterung: http://www.456bereastreet.com/lab/form_controls/text_input/ demonstriert die eingangs gezeigten CSS-Regeln zunächst live im Browser des Seitenbesuchers, und im Anschluß daran folgt zur Gegenüberstellung eine grafische Dokumentation der übrigen Kandidaten / Konkurrenten unter verschiedenen Betriebssystemen.

 

[Joe]

Klar, der olle IE, der nix kann, ausser für Bugs zu sorgen

Habs gelesen.
Anders: 2Textfelder untereinander haben absolut die Gleiche Grösse wenn ich sie mir egal mit welchem Browser anschaue.
Sie sind aber verschieden von Browser zu Browser richtig?
Der ein Browser stellts so dar der andre so. Völlig OK. FF ist ja nicht mein Mass der aller Dinge

ABER
Mein Fall ist aber anders:
ein Passwordfeld und ein Textfeld untereinander.
-> im FF absolut gleichgross
-> im IE unterschiedlich gross

 

[Joe]

Ok ich habe den "Fehler" gefunden. Das Problem ist die Zeichengrösse bei Passwordfeldern.
Da Passwordfelder mit Punkten arbeiten, sind die Zeichen kleiner als normale Textzeichen.

Die CSS-Formaierung der beiden Felder mit size="13" bringt so unterschiedliche Grössen im IE mit sich. Der FF ist da etwas "schlauer" und formatiert das auf gleiche Grössen.

In so einem Fall hilft es mit width: 95px; zu arbeiten. Das gibt Pixelgenau die Grösse des Text oder Passwort-Feldes an. Das heisst die Zeichengrösse ist hierbei egal.

<div id="login">
<form action="index.php?section=login" method="post">
<h2>Login</h2>
<h2>
		<input type="text"  style="border: 1px solid black; background-color: grey; color:#FFFFFF; font-face:Verdana; font-weight:bold; font-size:8pt; width: 95px;" name="Username" />
		<input type="password"  style="border: 1px solid black; background-color: grey; color:#FFFFFF; font-face:Verdana; font-weight:bold; font-size:8pt; width: 95px;"  name="Password" />
		<input type="submit" style="font-family: Verdana; font-size: 8pt" name="formaction" value="OK" />
</h2>
</form>
</div>