Form in P Tag ignoriert CSS

[SE]

Hallo allerseits,

habe folgendes Problem:

auf meiner Seite sollen bestimtme <p> Tags ein Padding bekommen, was auch funktioniert.

Wenn einer der <p>s allerdings eine <form> enthält, dann ignorieren die darin enthaltenen Elemente das Padding.

Gibt es eine Möglichkeit, dies zu umgehen?

Hier die fraglichen Codeausschnitte:

HTML:

  
...  
<td id="menu_right">  
<p>  
	Dieser Text hat das gewünschte Padding.  
</p>  
<p>  
	<form method="POST" action="search.php">  
		<input type="text" name="name" value="Dieses Input Element hat das gewünschte Padding NICHT!" /><br />  
		<input type="submit" value="Suchen!" /><br />  
	</form>  
</p>  
</td>  
...  

CSS:

  
td#menu_right p{  
	padding-left:10px;  
}  

[jobo]

Hallo,

form-Element sind Blockelemente. P-Elemente dürfen eigentlich nur inline-Elemente enthalten. Vielliecht solltest du das Formelement formatieren?

Gruß

jobo

[SE]

Danke für den Tip, hiermit funktioniert es:

HTML:

  
<form method="POST" action="...">  
	<input type="text" name="name" value="Wird jetzt auch richtig angezeigt" /><br />  
	<input type="submit" value="Suchen!" /><br />  
</form>  
  
<p>  
	wird weiterhin richtig angezeigt  
</p>  

CSS:

  
td#menu_right p{  
	padding-left:10px;  
}  
  
td#menu_right form{  
	padding-left:10px;  
}  

[Vinzenz Mai]

Hallo,

Wenn einer der <p>s allerdings eine <form> enthält, dann ignorieren die darin enthaltenen Elemente das Padding.

laut Spezifikation darf ein p-Element kein form-Element enthalten.

Gibt es eine Möglichkeit, dies zu umgehen?

Valides HTML schreiben und das form-Element in ein passendes Blockelement packen.

Freundliche Grüße

Vinzenz

[jobo]

Hallo,

Valides HTML schreiben und das form-Element in ein passendes Blockelement packen.

Echt, das Form-Element nochmal ummanteln?

Gruß

jobo

[Vinzenz Mai]

Hallo,

Valides HTML schreiben und das form-Element in ein passendes Blockelement packen.
Echt, das Form-Element nochmal ummanteln?

das body-Element ist ebenfalls ein Blockelement ;-)

Freundliche Grüße

Vinzenz

[jobo]

Hallo,

das body-Element ist ebenfalls ein Blockelement ;-)

ist es?

Gruß

jobo

[Vinzenz Mai]

Hallo,

das body-Element ist ebenfalls ein Blockelement ;-)
ist es?

vermutlich eher nicht. Schreibe halt: "passendes Blockelement oder body" :-)

Freundliche Grüße

Vinzenz

[jobo]

Hallo,

vermutlich eher nicht. Schreibe halt: "passendes Blockelement oder body" :-)

Ich wollte eher darauf hinaus, dass der mögliche "Reflex", möglichst überall noch ein Blockelement (div) rumzupacken ggf. nicht nötig ist. Ein Form-Element kann ja auch ohne umgebendes Blockelement gut da stehen, oder könnte. Ich dachte früher auch immer, alles müsste (fälschlicherweise) in eine p-Tag stehen, oder dann halt ein div-Tag.

Gruß

jobo

[Gunnar Bittersmann]

@@SE:

nuqneH

Wenn einer der <p>s allerdings eine <form> enthält

Hier liegt dein Irrtum.

'p' darf nicht 'form' enthalten. Trifft der Tagsoup-Parser auf das <form>-Tag, schließt er implizit das noch offene 'p'-Element (dessen End-Tag optional ist).

Du hast also dasselbe, als ob du

<p>  
</p><form method="POST" action="search.php">

geschrieben hättest.

Das </p>-End-Tag nach </form> gehört zu keinem noch offenen 'p'-Element, ist somit ein HTML-Fehler. Das hätte dir der Validator auch gesagt.

Qapla'