Formularelemente übernehmen CSS fehlerhaft

Status
Nicht offen für weitere Antworten.
P

packman

Grünschnabel
Hallo

Ich verzweifle gerade ein meinem Formular, da ich die sich darin befindenden Elemente nicht aneinander Anpassen kann.

-die Textfelder sind 2-3px tiefer als die Textfeld Bezeichnung
-das dropdown übernimmt die Höhenangaben nicht und ist einige Pixel kürzer als die texfelder
-die textarea ist 2-3px länger als die Textfelder
-dem Button muss ich 5px mehr Abstand geben damit er sich genau unter den restlichen Elementen befindet

obwohl ich alles gleich angegeben habe kommen solche Verschiebungen vor :mad:

PS: primär: IE sekundär: Firefox


HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<style type="text/css">
		.form_element
		{
			font-family: 		arial;
			text-align: 		left;
			font-size:			12px;
			float:				left;
			width:				120px;
			height:				20px;
			border:				1px solid #000000;
			margin:				0 0 0 0;
			padding:			0 0 0 0;
		}

		form
		{
			margin:				0 0 0 0;
			padding:			0 0 0 0;
		}

		input, select
		{
			text-align:			left;
			border:				1px solid #000000;
			width:				250px;
			height:				20px;
			font-size:			12px;
			font-family: 		arial;
			margin:				0 0 0 0;
			padding:			0 0 0 0;
		}

		textarea
		{
			text-align:			left;
			border:				1px solid #000000;
			width:				250px;
			font-size:			11px;
			font-family: 		arial;
			margin:				0 0 0 0;
		}

		.button{
			text-align:			left;
			border:				1px solid #000000;
			margin:				0 0 0 125px;
			width:				100px;
			height:				20px;
			font-size:			12px;
			font-family: 		arial;	
		}
	</style>
</head>
<body>

<form name="form_login" method="post" action="" >
	<div class="form_element">Nickname:</div>
		<input name="name" type="text" value="" />
		<div style="clear:both;">&nbsp;</div>
	<div class="form_element">Vorname:</div>
		<input name="vorname" type="text" value=""/>
		<div style="clear:both;">&nbsp;</div>
	<div class="form_element">Nachname:</div>
		<input name="nachname" type="text" value="" />
		<div style="clear:both;">&nbsp;</div>
	
	<div class="form_element">Berechtigung:</div>
		<select name="berechtigung">
			<option value="0">--Berechtigung auswählen--</option>
			<option value="1">Gast</option>
			<option value="2">Admin</option>
		</select>
		<div style="clear:both;">&nbsp;</div>
	
	<div class="form_element">Nachname:</div>
		<input name="nachname2" type="text" value="" />
		<div style="clear:both;">&nbsp;</div>
	
	<div class="form_element">Beschreinbung:</div>
	<textarea name="beschreib" cols="20" rows="5"></textarea>
	<div style="clear:both;">&nbsp;</div>
	
	<input class="button" name="send" type="submit" value="Absenden">
	<div style="clear:both;">&nbsp;</div>
</form>

</body>
</html>
 
Zuletzt bearbeitet:
Mach daraus mal ein valides HTML-Dokument:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
	<style type="text/css">
		label {
			float: left;
			width: 120px;
		}

		input, select {
			text-align: left;
			width: 250px;
		}

		textarea {
			width: 250px;
		}
		.button {
			width: auto;
		}
	</style>
</head>
<body>

<form name="form_login" method="post" action="">
	<p><label>Nickname:</label>
		<input name="name" type="text" value=""></p>
	<p><label>Vorname:</label>
		<input name="vorname" type="text" value=""></p>
	<p><label>Nachname:</label>
		<input name="nachname" type="text" value=""></p>
	<p><label>Berechtigung:</label>
		<select name="berechtigung">
			<option value="0">--Berechtigung auswählen--</option>
			<option value="1">Gast</option>
			<option value="2">Admin</option>
		</select></p>
	<p><label>Nachname:</label>
		<input name="nachname2" type="text" value=""></p>
	<p><label>Beschreinbung:</label>
		<textarea name="beschreib" cols="20" rows="5"></textarea></p>
	<p><input class="button" name="send" type="submit" value="Absenden"></p>
</form>

</body>
</html>
Den label-Elementen solltest du noch ein for-Attribut geben.
 
Also beim IE6 bringt es vllt was, wenn du bei den entsprechenden Feldern statt

"margin: 0 0 0 0"
"margin: -1px 0 0 0"

schreiben würdest, wie du es allerdings für den FF anpasst kann ich dir jetzt nicht sagen. :confused:

:edit:
da war ich dann wohl zu langsam.. naja, richtig helfen konnte ich ja sowieso nicht :D
Manchmal denkt man halt zu kompliziert.. . ^^
 
Probier es mal mit diesem erweiterten Stylesheet:

Code: 
* {
      padding: 0;
      font-size: 12px;
      font-family: arial;
}

label, input, select, textarea {
      border: 1px solid #cfcfcf;
}

label {
      float: left;
      width: 150px;
      margin: 0 4px 0 0 !important; /* Für moderne Browser */
      margin: 0 2px 0 0; /* Für IE */
}

input {
      width: 250px;
      margin: 0 0 0 0 !important; /* Für moderne Browser */
      margin: -1px 0 0 0; /* Für IE */
}

select {
      width: 252px !important; /* Für moderne Browser */
      width: 253px; /* Für IE */
}

textarea {
      width: 250px;
}

.button {
      width: auto;
      margin: 0;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück