<fieldset>
Das Element <fieldset> hat in verschiedenen Browsern (z.B. IE / FF) unterschiedliche Defaultwerte für [margin/padding], gleichzeitig werden die CSS-Eigenschaften unterschiedlich interpretiert. Ähnlich wie beim Listen-Element[*].
Habe ein Beispiel erstellt (XHTML 1.0 STRICT), wer damit ein wenig "spielt" dem wird es klar/unklar.
Empfehlung: Design-Steuerung besser über Child-Elements bzw. Parents-Elements definieren.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
/*<![CDATA[*/
html,body
{
margin: 0;
padding: 3px;
background-color: #CCCCCC;
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 100.01%;
}
div {
margin: 1em;
border: 1px solid #000000;
padding: 1px;
background-color: #FFFFFF;
font-size: 0.8em;
}
form {
display: inline; /* margin-top/bottom ausschalten*/
background-color: #DDDDDD;
}
fieldset
{
/* element-typ ~ block (default);
Cross-Browser: unterschiedliche Interpretation
von margin- und padding-Eigenschaften !!!
Design-Steuerung besser über Child-Elements bzw.
Parents-Elements definieren
*/
margin: 0;
border: 1px solid #000000;
padding: 0;
background-color: #FFDD00;
}
legend {/* element-typ ~ block (default)*/
margin: 0;
border: 1px solid #000000;
padding: 1em;
background-color: #FF8800;
}
label {
display: block;
background-color: #99CCFF;
}
/*]]>*/
</style>
</head>
<body>
<div>
<form action="#" id="test">
<fieldset>
<legend>Inhalt [legend: element-typ ~ block (default)]</legend>
<label for="vname">Vorname</label>
<input type="text" id="vname" size="30" />
<label for="nname">Nachname
<input type="text" id="nname" size="30" />
</label>
</fieldset>
</form>
</div>
</body>
</html>