form element rutscht aus dem Textfluss

[ZimTis]

Hi,

auf http://www.drei-schilde-maler.de/index.php?id=004 habe ich ein Formular erstellt. Das Problem ist nun, das FireFox die CSS Anweisungen für das Formular komplett ignoriert. Und es sogar außerhalb des textflusses platziert.
Allerdings erst ab Version 4.
Der IE hat keine Probleme und zeigt es richtig an.
Hier der Code für das Formular

  
<form class="kontakt" name="FormName" action="mail.php" method="post" onSubmit="return Testeingabe(this)">  
	<a class="zeile">  
		<label>Ihr Name / Ihre Firma:*</label>  
		<input class="text" type="text" name="Name" size="40">  
	</a>  
	<a class="zeile">  
		<label>E-Mail oder Telefonnr.:*</label>  
		<input class="text" type="text" name="EMail_Telefon" size="40">  
	</a>  
	<a class="zeile">  
		<label>Ihre Nachricht:*</label>  
		<textarea name="Nachricht" cols="40" rows="5"></textarea>  
	</a>  
	<input class="knopf" type="submit" name="submitButtonName" value="Nachricht senden">  
</form>  

Und der dazugehörige CSS code

  
#page p.alles i.inhalt form.kontakt  
{  
	width: 500px;  
	display: inline-block;  
}  
#page p.alles i.inhalt form.kontakt a.zeile  
{  
	display: block;  
	width: 500px;  
	margin: 20px 0px 20px 0px;  
}  
#page p.alles i.inhalt form.kontakt a.zeile label  
{  
	display: block;  
	width: 160px;  
	float: left;  
	font-style: normal;  
}	  
#page p.alles i.inhalt form.kontakt a.zeile input.text,  
#page p.alles i.inhalt form.kontakt a.zeile textarea  
{  
	width: 300px;  
	border: 1px solid #565656;  
	color: #565656;  
	resize: none;  
}  
#page p.alles i.inhalt form.kontakt input.knopf  
{  
	display: block;  
	width: 150px;  
	border: 1px solid #565656;  
	color:#565656;  
	margin: 0px 0px 0px 160px;  
}  

Das witzige dabei, wenn ich das CSS umschreibe, so.

  
form.kontakt  
{  
	width: 500px;  
	display: inline-block;  
}  
form.kontakt a.zeile  
{  
	display: block;  
	width: 500px;  
	margin: 20px 0px 20px 0px;  
}  
form.kontakt a.zeile label  
{  
	display: block;  
	width: 160px;  
	float: left;  
	font-style: normal;  
}	  
form.kontakt a.zeile input.text,  
form.kontakt a.zeile textarea  
{  
	width: 300px;  
	border: 1px solid #565656;  
	color: #565656;  
	resize: none;  
}  
form.kontakt input.knopf  
{  
	display: block;  
	width: 150px;  
	border: 1px solid #565656;  
	color:#565656;  
	margin: 0px 0px 0px 160px;  
}  

werden die CSS anweisungen übernommen, aber das Formular ist immernoch ausserhalb des Textflusses.

Weiß jemand Rat?

[ZimTis]

Ok hat sich gelöst, habe das Formular jetzt in ein Objekt Element gelegt.
-.-'

[MudGuard]

Hi,

#page p.alles i.inhalt form.kontakt

i darf nur inline-Elemente enthalten. form ist ein block-Element.
Dein HTML-Code ist also schon falsch.

Das a-Element als Gruppierungs-Element zu mißbrauchen, erscheint mir sehr fragwürdig. Die Klasse im a ist überflüssig, da jedes a in Deinem form dieselbe Klasse hat.

Deine "Lösung" mit dem object erscheint mir auch sehr seltsam.

Ich würde erstmal sinnvolles und korrektes HTML verwenden ...

cu,
Andreas

[ZimTis]

Hi,

#page p.alles i.inhalt form.kontakt

i darf nur inline-Elemente enthalten. form ist ein block-Element.
Dein HTML-Code ist also schon falsch.

Ich weiß, hab ich dann auch gesehen, da werde ich mir nur in 10 Jahren schwere Vorwürfe machen.

Das a-Element als Gruppierungs-Element zu mißbrauchen, erscheint mir sehr fragwürdig. Die Klasse im a ist überflüssig, da jedes a in Deinem form dieselbe Klasse hat.

und warum, würde mich wirklich interessieren. Habs schon ohne versucht, nur mit lable, aber das Ergebnis war nicht wirklich schön.Wegen den Klassen, ich habs lieber eindeutig benannt^^

Deine "Lösung" mit dem object erscheint mir auch sehr seltsam.

laut W3C validator brauchte es einen Objekt tag um dem form tag.

es funktioniert UND ist valide, was will man mehr...

Ich würde erstmal sinnvolles und korrektes HTML verwenden ...

musst ma ja nich gleich so anpflaumen^^

cu,
Andreas

[MudGuard]

Hi,

musst ma ja nich gleich so anpflaumen^^

???

cu,
Andreas

[ZimTis]

Hi,

musst ma ja nich gleich so anpflaumen^^

???

man, war n schertz.....darum auch die "^^"
hab jedenfalls deine Kritik beherzigt und nochmal ohne die a tags versucht, hat geklappt.

cu,
Andreas

[Der Martin]

Hallo,

auf http://www.drei-schilde-maler.de/index.php?id=004 habe ich ein Formular erstellt. Das Problem ist nun, das FireFox die CSS Anweisungen für das Formular komplett ignoriert. Und es sogar außerhalb des textflusses platziert.

das Einstiegsproblem ist ja mit dem Korrigieren des HTML-Codes anscheinend gelöst. Aber ...

<a class="zeile">
<label>Ihr Name / Ihre Firma:*</label>
<input class="text" type="text" name="Name" size="40">
</a>

... denken wir uns die a-Elemente mal weg, dann ist das label-Element immer noch nicht sinnvoll verbaut, denn es hat keinen Bezug zu seinem Eingabeelement. Ein label-Element soll entweder sein form control umschließen, oder mit einem for-Attribut auf die ID seines form control verweisen. Einige Browser (oder nur der IE6?) können mit der ersten Methode nichts anfangen, die zweite ist dagegen narrensicher.
Dann bekommt das label-Element nämlich auch die Funktion, die es haben soll: Beim Anklicken der Beschriftung wird das zugehörige Formularelement focussiert.

#page p.alles i.inhalt form.kontakt a.zeile label
{
display: block;
width: 160px;
float: left;
font-style: normal;
}

Gefloatete Elemente brauchen kein display:block (bzw. haben es schon automatisch).

So long,
 Martin