CSS Textbox und Button horizontal ausrichten

[raven16]

Hallo,

es ist ein ständiger Kampf es allen Browsern recht zu machen.
Ich versuche schon lange die Buttons horizontal mit den Textboxen auszurichten. Im Firefox steht der zu tief und im IE10 zu hoch. Wenn bei beiden float:left; anwende, dann sind sie ausgerichtet, aber ich kann dann den Abstand zwischen Textbox und Button nicht mehr ändern

Hier mal ohne float das Ergebnis:

Firefox:

IE10:


Code dazu:

/*Allgemeiner CSS-Code zu Formularfeldern*/
input[type="text"], textarea {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
	padding: 3px 0px 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid #ddd;
}
input[type="text"]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(255, 96, 0, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(255, 96, 0, 1);
}

input[type="submit"] {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none;
	margin: 5px 1px 3px 0px;
	border: 1px solid #ddd;
}
input[type="submit"]{padding-bottom: 2px;}
input[type="submit"]::-moz-focus-inner {
	border: 0;
}
input[type="submit"]:hover,input[type="submit"]:focus{
	box-shadow: 0 0 5px rgba(255, 96, 0, 1);
	margin: 5px 1px 3px 0px;
	border: 1px solid rgba(255, 96, 0, 1);
	text-align: center;
}

/*CSS-Code für diesen Button*/
.button{
	height: 28px;
	line-height:28px;
	background: #fff;
	color: #333;
}

/*CSS-Code für diese Textbox*/
#search{
	height: 20px;
	width:200px;
	color: #666;
	font-size: 12pt;
}
#search:focus{
	color: #333;
}

Ich hoffe ihr könnt mir helfen. Bin leider nicht so der CSS-Crack.
Danke

 

[T0a5tbr0t]

Das sind ja normalerweise inline (inline-block) Elemente, also könnte einfach "vertical-align: middle" die Lösung sein.

 

[Lawnmower]

Wenn bei beiden float:left; anwende, dann sind sie ausgerichtet, aber ich kann dann den Abstand zwischen Textbox und Button nicht mehr ändern

wiso nicht, per margin-right bei der Textbox bzw margin-left bei dem Button sollte das gehen

 

[raven16]

Danke für die fixen antworten,

Das sind ja normalerweise inline (inline-block) Elemente, also könnte einfach "vertical-align: middle" die Lösung sein.

tatsächlich war
vertical-align: bottom;
die Lösung des Problems und fürt auch gleich dazu, dass es im IE gleich aussieht :-)
Habe es gleich mal für alle submits festgelegt.

Ergänzung (19. März 2014)

wiso nicht, per margin-right bei der Textbox bzw margin-left bei dem Button sollte das gehen

Ne hatte bei textbox und submit-button float left gemacht und dahinter mit einer invisible divbox den float aufgehoben und habe dann den submit-button mit margin-left: 5px; versucht nach rechts zu schieben und dadurch hat sich nichts getan warum auch immer