SE: Form in P Tag ignoriert CSS

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;  
}  

  1. Hallo,

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

    Gruß

    jobo

    1. 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;  
      }  
      
      
  2. 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

    1. Hallo,

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

      Echt, das Form-Element nochmal ummanteln?

      Gruß

      jobo

      1. 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

        1. Hallo,

          das body-Element ist ebenfalls ein Blockelement ;-)

          ist es?

          Gruß

          jobo

          1. Hallo,

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

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

            Freundliche Grüße

            Vinzenz

            1. 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

  3. @@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'

    --
    Volumen einer Pizza mit Radius z und Dicke a: pi z z a