Layoutproblem mit Formular

[Rebelhig]

Hallo,
ich versuche, ein Formular auszurichten. Bei meinem Versuch funktioniert das ganze nur im IE7, Firefox und Opera richten die label nicht links aus und daneben die Input-Elemente, sondern stellen alles untereinander da.
Hier mal mein Formular:

<form id="" class="mailform" name="form1" method="post" action="">
  <fieldset>
  <legend>Persönliche Daten</legend>
  <label for="anrede" class="label">Anrede</label>
  <select name="anrede" id="anrede" class="select">
    <option value="Frau">Frau</option>
    <option value="Herr">Herr</option>
  </select><br />
  <label for="titel" class="label">Titel</label>
  <input type="text" name="titel" id="titel" class="input"/>
  <br />
  <label for="vorname" class="label">Vorname</label>
  <input type="text" name="vorname" id="vorname" class="input"/>
  <br />
  <label for="nachname" class="label">Nachname</label>
  <input type="text" name="nachname" id="nachname" class="input"/>
  <br />  
  </fieldset>
</form>

Hier mein CSS:

@charset "utf-8";
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000066;
}

form.mailform {
	background-color: #999999;
	width: 490px;
}
form fieldset {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 5px;
	margin-left: 5px;
	border: 1px solid #000066;
	overflow: auto;
}
form legend {
	color: #000066;
}

form .label {
	width: 200px;
	text-align: right;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 5px;
	margin-left: 0px;
	font-size: 12px;
	color: #000066;
	float: left;
	display: block;
}
form .select {
	width: 80px;
	font-size: 12px;
	color: #000066;
}
form .input {
	width: 250px;
	font-size: 12px;
	color: #000066;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}

form br {
	clear: left;
}

In den Anhängen könnt ihr sehen, wie das Formular dargestellt wird.

Wo liegt mein Denkfehler?

Gruss

[Zer0]

Eine Idee wäre sicherlich das ganze Zeugs in Tabellen zu verpacken, der Einfachheit halber?

[mogidala]

könnte mir vorstellen dass es probleme mit den klassenbezeichnungen gibt - du verwendest klassen, die genau so heißen wie die html elemente selbst. versuch mal, die klassen rauszuschmeissen und den punkt vor den klassen zu entfernen im css, also

 <label for="titel">Titel</label>

bzw.

form label {
...
}

[sejuma]

Versuch's mal so:

form .select {
	width: 80px;
	font-size: 12px;
	color: #000066;
	margin-bottom: 30px;
}
form .input {
	width: 250px;
	font-size: 12px;
	color: #000066;
	margin-top: 5px;
	margin-right: 0px;
	margin-left: 210px;
	position: relative; 
        top: -30px;
}

[hero-master]

Guten Abend

Eine Idee wäre sicherlich das ganze Zeugs in Tabellen zu verpacken, der Einfachheit halber?

Warum wäre das einfacher? Es wäre umständlich und unnötig

könnte mir vorstellen dass es probleme mit den klassenbezeichnungen gibt - du verwendest klassen, die genau so heißen wie die html elemente selbst

Das ist den Browsern egal, du kannst die Klassen nennen wie du willst (natürlich außer irgendwelchen Sonderzeichen


@Rebelhig: Dein Denkfehler liegt wohl bei den vordefinierten Abständen, die du nicht alles auch null gesetzt hast. Hau mal ein CSS-Reset rein und schau, ob damit die Probleme weg sind:

* {margin:0; padding:0}