Browserunterschiede bei Formularen

[Prophet05]

Ich habe ein Textfeld und einen Butten mit diesem Code formatiert:

input
{
	font-size:10px;
	font-family:'Verdana', sans-serif;
	border:solid 1px #124;
	background-color:#fff;
	color:#000;
	line-height:13px;
	padding:2px 3px;
	margin-right:3px;
}

Nun habe ich das problem das jeder browser den button anderes darstellt und das textfeld immer gleich bleibt... nur opera macht es richtig...

Hier ein beispiel: http://prophet.argoedv.de/test/input_prob.htm

Wie bekomme ich es hin das textfeld und button in allen browsern gleichdargestellt werden?

mfg Prophet05

 

[Gumbo]

Wodurch macht sich denn die etwaige Fehldarstellung bemerkbar?

 

[Prophet05]

Vor allem in der größe und dem Padding. Wobei mich die höhe eigentlich am meisten stört.

 

[Maik]

Ohne CSS-Formatierungen werden das Eingabefeld und der Button im FireFox, IE, Mozilla und Netscape gleich hoch dargstellt, im Opera ist der Button type='button' etwas niedriger, als das Eingabefeld type='text'.

Somit liegt es wohl an dem von dir verwendeten allgemeinen Selektor input und den darin notierten CSS-Eigenschaften, die von den Browsers für die beiden Formular-Elemente unterschiedlich bzw. überhaupt nicht angewendet werden.

 

[Prophet05]

soweit war ich auch schon was ich brauche ist eine lösung für dieses problem...

die einzige lösung die mir bisher eingefallen ist wäre es über ein bild zu regeln. ich fnde diese variante aber sehr unschön.

EDIT: und auch sie funktioniert nicht vernünftig weil der button dan komisch nach oben verschoben wird....

 

[Maik]

Eine Lösung wären u.U. zwei CSS-Klassen, um die Höhendifferenz zwischen den beiden unterschiedlichen Formular-Elementen auszugleichen:

input.text { }
input.button { }

 

[Prophet05]

habe ich auch schon getestet führt wieder zu dem problem das alle browser eine andere höhe für den button anzeigen, auch wenn ich ihm eine feste zuweise...