zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden IE - Verschiebung von Formularelementen durch Fieldset

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 03.02.2005, 10:10
Professional
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.06.2004
Ort: Wuppertal
Beiträge: 269
SimonWpt befindet sich auf einem aufstrebenden Ast
Standard

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>
2. Es wird ein Margin vererbt bei]]]][/list]
Aber nicht bei]]][/list]
Wirklich sehr verwirrend.

Liebe Grüße


Bertram
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 03.02.2005, 10:53
Benutzer
neuer user
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard

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>
das bringt bei mir (IE6) die Textboxen an die richtige Position und verschiebt dafür die checkbox aus dem sichtbaren Bereich heraus

...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
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 03.02.2005, 12:25
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
  #14 (permalink)  
Alt 04.02.2005, 12:23
Professional
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 25.06.2004
Ort: Wuppertal
Beiträge: 269
SimonWpt befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ulle
Habe ein Beispiel erstellt (XHTML 1.0 STRICT), wer damit ein wenig "spielt" dem wird es klar/unklar.
Hallo Ulle,

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>
Liebe Grüße


Bertram
Mit Zitat antworten
  #15 (permalink)  
Alt 04.02.2005, 12:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Leider ist es durch die vielen zusätzlichen Angaben (wie Farbe usw.) etwas unübersichtlich geworden.
Das mache ich Grundsätzlich so 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>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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
opera u. fieldset?? Holger (HMR) CSS 5 21.12.2004 21:18
versch. text in fieldset untersch. ausrichten Holger (HMR) CSS 1 10.12.2004 18:48


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:36 Uhr.