Input Felder ungleich lang trotz width Angabe - warum?

[epic]

Guten Tag,

habe ein Problem mit einer Profilseite mit mehreren Inputfeldern (Checkboxen, Textfelder, Uploadinputfeld) und zwar sind die Felder ungleich lang.

Das Problem stellen eigentlich die Textfelder dar, alle anderen sind gleich lang.
Nach einiger Zeit googlen habe ich mehrere Tricks bereits ausprobiert wie float:left und fixe width im CSS angeben.

Anbei ein Screenshot:



Hier noch der betreffende Part aus der CSS:

	#benutzer_job_profilseite input 
	{
		  width: 200px;
		  float: left;
		
	}

Hat jemand noch weitere Vorschläge?
Danke!

 

[Renegade]

Hi,

Werden den Input-Feldern ein Padding mitgegeben? Oder anders: Was passiert wenn du

#benutzer_job_profilseite input {
  padding:0;
  width: 200px;
  float: left;
}

schreibst?

 

[epic]

Danke für den Tipp!

Google Chrome gehts.

Aber in IE: leider nichts oder vielleicht ein Pixel den man jetzt so mit freiem Auge nicht ausmachen kann, aber gleich lang sind die Felder deswegen nicht (muss die Seite leider für Internet Explorer auch optimieren).

 

[baserider]

Hi,

ich hatte auch mal so ein Problem. Du musst im CSS noch die border-Eigenschft für das input-Feld setzen, damit du das Standardverhalten ausschaltest. Dann sollte es mit der Breite auch hinkommen.

 

[epic]

Hi,

ich hatte auch mal so ein Problem. Du musst im CSS noch die border-Eigenschft für das input-Feld setzen, damit du das Standardverhalten ausschaltest. Dann sollte es mit der Breite auch hinkommen.

Hallo. Danke für deinen Tipp.
Im Google Chrome passt es damit weiterhin, im IE sieht es leider noch immer nicht besser aus. Er übernimmt zwar die Bordereigenschaft (zB 1px solid green) jedoch das ändert an der Breite nichts :-((

 

[Ronja]

Dann definiere für den IE doch ein eigenes css. zwar nervig, aber es funktioniert wenigstens.

gruß ronja

 

[Ronja]

.formularfeld {	
	color: #666666;
	margin: 5px 0 5px 0;
	padding: 0px 0px;
	height: 18px;
	width: 295px;
	border: 1px #d9d9d9 solid;}

Ich verwende das immer ungefähr so. Und funzt einwandfrei.

LG Ronja

 

[baserider]

Hi,

bei mir funktioniert das auch.
Du hast wohl vergessen für das input-Feld margin und padding auf 0 zu setzen. Ich verwende immer noch ein reset.css für sowas.
Wenn ich das div und Eingabefeld untereinander setze, sind beide exakt gleich lang. (doctype: xhtml-strict)

input{
  border: 1px solid #ff0000;
  width: 200px;
  margin: 0;
  padding: 0;
}

div{
  width: 200px;
  background-color: #ff0000;
  border: 1px solid #000;
}

<input type="text" name="name" value="" />
<div>div mit checkbox</div>