03.02.2005, 10:10
|
|||
|
|||
Effekt Ergänzung:
1. Der Einzug geschieht nur innerhalb des Fieldsets: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenannt</title>
<style type="text/css">
form{margin:25px}
fieldset{margin:0}
</style>
</head>
<body>
<form>
<input type="text" name="test">
<fieldset>
<input type="text" name="test2">
</fieldset>
</form>
</body>
</html>
Aber nicht bei]]][/list] Wirklich sehr verwirrend. Liebe Grüße Bertram
__________________
TYPO3 Agentur - Agentur Simon aus Wuppertal 
|
| Sponsored Links |
|
03.02.2005, 10:53
|
|||
|
|||
|
Code:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>IE Bug?</title>
<style type="text/css">
#rand{margin:25px;}
br {margin:0;padding:0;}
input{margin-left:-25px;padding:0;}
</style>
...ganz offensichtlich wird hier die margin-left Eigenschaft (und nur die) an input-text-type vererbt soweit ich weiß tritt das bei xhtml 1.0 strict nicht auf
|
| Sponsored Links |
|
03.02.2005, 12:25
|
|||
|
|||
|
<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>
|
|
04.02.2005, 12:23
|
|||
|
|||
|
Zitat:
erst einmal herzlichen Dank für deine Arbeit und dein Beispiel. Leider ist es durch die vielen zusätzlichen Angaben (wie Farbe usw.) etwas unübersichtlich geworden. Außerdem ist es sinnvoll, bei dem in der Frage benutzten Doc-Type zu bleiben, um genau dafür eine Lösung zu finden. Evt. tritt ein Fehler in anderen Doc-Types nicht auf. Ich habe dein Beispiel gekürzt und siehe da, die Problematik bleibt. Wenn man versucht, einen Submit-Button zu integrieren, taucht der Rand wieder auf. Man kann das Verhalten aber durch ein umschließendes DIV ausschalten. Beispiel: Code:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>xxxx</title>
<style type="text/css">
html,body{
background:#ccc;
color:#000;
font:100.01% Verdana,Geneva,Arial,Helvetica,sans-serif;
}
form{
display:inline
}
fieldset{
margin:0;
padding:0
}
label{
display:block
}
/*]]>*/
</style>
</head>
<body>
<div style="margin:25px">
<form action="#" id="test">
<fieldset>
<legend>Legende</legend>
<label for="vname">Vorname</label>
<input type="text" id="vname" size="30">
<label for="nname">Nachname</label>
<input type="text" id="nname" size="30">
<div><input type="submit" value="Weiter"></div>
<input type="reset" value="Löschen">
</fieldset>
</form>
</div>
</body>
</html>
Bertram
__________________
TYPO3 Agentur - Agentur Simon aus Wuppertal
|
|
04.02.2005, 12:34
|
|||
|
|||
|
Zitat:
 nur so werden die verschiedenen Interpretationen der einzelnen Browsern sichtbar und nachvollziehbar. Der DOCTYPE, an den mußt Du Dich bei meinen Antworten gewöhnen, ich habe mich mal für XHTML 1.0 entschieden und fertig, alles was ich hier tue und veröffentliche mache ich ja auch für mich  ps. wir sind ja auch im XHTML-Forum (bitte keine HTML / XHTML diskussoion in diesem THREAD, davon gibt es genug)
__________________
</ulle>
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Formular mit fieldset gestalten | seeadler | CSS | 31 | 05.04.2013 19:39 |
| fieldset und der Internet Explorer | RFDarter | CSS | 2 | 05.11.2010 20:18 |
| fieldset wächst nicht mit | bigman007 | (X)HTML | 1 | 08.01.2008 15:21 |
| IE6: floatendes div in fieldset rutscht nach oben | vroni | CSS | 2 | 30.09.2007 22:42 |
| fieldset mit display:inline und Tabelle | madler | CSS | 0 | 13.04.2006 15:32 |
Linear-Darstellung
