Einzelnen Beitrag anzeigen
  #13 (permalink)  
Alt 03.02.2005, 13:25
ulle ulle ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

<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>
__________________
</ulle>
Mit Zitat antworten