HTML: input[type="submit"] kleiner als input[type="text"] ?!

[UID0]

Guten Abend,
ich habe ein (vermutlich) kleines Problem. Ich habe ein Formular zur Anmeldung, in dem sich ein Textfeld, ein Passwortfeld und ein Submitfeld befinden. Das Text- und Passwortfeld haben die Größe wie es sein soll. Das Submitfeld wird jedoch anders dargestellt, obwohl es genau so aussehen müsste wie die anderen beiden.

Hier anschaulich: Link

Ich kann mir vorstellen, dass ich nicht der einzige bin, der das schon mal gefragt hat, aber ich habe nichts der gleichen bei Google gefunden.

Danke schon mal im Voraus!

 

[rumbalotte]

Submit ist in dem Sinne kein Feld, sondern ein Button
mit dem style attribut "height" kannste aber auch die höhe separat anpassen, oder du nimmst eine Grafik dafür

 

[DJND]

Ih, grafik! Dabei gibt es doch dank html5/css3 so schöne gradienten und andere Nettigkeiten. Height sollte allerdings hier reichen.

Noch ein Hinweis. Wenn Fragen zu HTML mit einem Beispiel ausgestattet sind und die Fragestellung etwas komplizierter ist, dann haben die wenigsten Lust, sich HTML, CSS, JS lokal zu erstellen und selbst herumzubasteln. Das ganze geht aber auch einfacher. Veröffentliche das Beispiel einfach als Link unter http://jsfiddle.net/ - dort kann man zum helfen direkt etwas herumprobieren. :-)

 

[UID0]

Das Problem ist, ich habe sowohl den (Text)feldern, als auch dem Button die selbe Höhe (30px) zugewiesen.

Hier nochmal auf jsfiddle:
http://jsfiddle.net/CVKSC/

 

[DJND]

Ich würde vermuten, daß bei der Höhe eines Buttons/Submits der Rahmen und das Padding in der Höhe mit drinstecken. Bei einem Textfeld scheint dies nicht der Fall zu sein.

BTW: Fürs Auseinandernehmen von HTML empfehle ich Firefox + Firebug. Nach Abzug von Border und padding bleibt da nur noch 18px für den Inhalt. Am besten padding rausnehmen.

Du bist nicht der erste, der sich über den Effekt wundert: http://stackoverflow.com/questions/6079359/css-padding-added-to-height-width-for-input-type-submit

 

[UID0]

Wenn ich padding rausnehme, ist die Höhe des Buttons bei 43px genau so hoch wie die des Textfelds. Ich mache das erstmal so.

 

[Daaron]

Jep, das ist eine Eigenart von Buttons... die verhalten sich hinsichtlich des Paddings alles andere als erwartungsgemäß. Daran muss man sich gewöhnen, der "Fehler" taucht schließlich in allen Browsern gleichermaßen auf.

 

[UID0]

Habs hinbekommen. Bei beiden das padding entfernt und die Höhe der (Text)Felder auf 43px und die des Buttons auf 45px (43px + 2*1px Border). Das hat hin gehauen. Ich hoffe, dass sich das in Zukunft von selbst behebt.

Danke an die Helfenden.