✔ Probleme mit CSS-Formatierung bei submit und textarea

Status
Nicht offen für weitere Antworten.
F

falbala

Grünschnabel
Hallo miteinander!

Langsam verzweifle ich an meinem Problem. Ich hoffe, dass irgendwer eine Antwort findet, denn in sämtlichen anderen Foren war meine Suche nach der Lösung meines Problems erfolglos.

Ich habe folgenden HTML-Code:
HTML: 
<form name="newpat" action="" method="post">
	<label for="vorname">Vorname:</label>
	<input id="vorname" name="vorname" type="text" value="asfjl" />
	<label for="nachname">Nachname:</label>
	<input id="nachname" name="nachname" type="text" value="fdaslf" />
	<label for="beschreibung">Beschreibung:</label>
	<textarea id="beschreibung" name="beschreibung">Bla bla blu blu</textarea>
	<label for="linuxbox">LinuxBox:</label>
	<select id="linuxbox" name="linuxbox">
		<option>halloooooobox</option>
		<option>omgbox1</option>
		<option selected>linuxbox1</option>
	</select>
	<input id="submit" type="submit" value="Patientendaten &auml;ndern"/>
</form>

Dazu kommt folgender CSS-Code:
HTML: 
label {
  display: inline;
	float: left;
  font-weight: bold;
	clear: both;
	text-align: right;
	width: 15em;
	margin-right: .5em;
	margin-top: .3em;
	margin-bottom: .4em;
}
#vorname, #nachname {
	display: block;
	width: 15em;
	margin-left: 14em; 
	margin-right: .3em;
	margin-top: .25em;
	margin-bottom: .25em;
	border: 1px solid #CC0000;
}
select, #linuxbox {
	display: block;
	width: 15em;
	margin-left: 14em;
	margin-right: .3em;
	margin-top: .25em;
	margin-bottom: .25em;
	border: 1px solid #CC0000;
}
textarea {
	display: block;
	width: 25em;
	margin-left: 14em;
	margin-right: .3em;
	margin-top: .25em;
	margin-bottom: .25em;
	height: 10em;
	overflow: auto;
	border: 1px solid #CC0000;
}
html>body textarea {
	margin-left: 14.4em;
}
#submit {
	border-width: 2px;
	border-style: ridge;
	background-color: #cc0000;
	border-color: #aa0000;
	color: #EEE;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-left: 15.8em;
	margin-top: 2em;
	width: 16.7em;
}
html>body #submit {
	margin-left: .1em;
	width: 16.6em;
}

Im Internet Explorer wird komischerweise alles richtig dargestellt. Nur der Firefox macht diesmal Probleme - mein Submit-Button verschiebt sich komisch.
Ich bin mittlerweile drauf gekommen, dass es irgendwie an meiner Textarea liegt, dass mein Button nicht zentriert unter der Auswahlbox positioniert wird. Jedoch weiß ich nicht, warum die Textarea nicht kompatibel mit meinem Submit-Button ist.
Zur Veranschaulichung noch 2 Screenshots.

Bitte, bitte, weiß jemand, warum mir meine Textarea meinen Button "kaputt" macht?
Danke schon im Voraus!

LG, falbala
 

Anhänge

  • mit-textarea.jpg
    mit-textarea.jpg
    20,4 KB · Aufrufe: 179
  • ohne-textarea.PNG
    ohne-textarea.PNG
    3,4 KB · Aufrufe: 149
Zuletzt bearbeitet:
Ich kann's jetzt leider am FF nicht überprüfen.
Aber du hast für #submit zwei unterschiedliche Margins hinterlegt, die sich vermutlich in die Quere kommen.
Lösche mal hier
HTML: 
html>body #submit {
	margin-left: .1em;
	width: 16.6em;
}
das "#submbit" raus. Denn in der Definition obendrüber hat es ein margin-left von 15.8em.
Da in CSS immer die "letzte" Definition gilt, bleiben die vorher definierten 15.8em wirkungslos.

Vermutlich kannst du ohnehin die gesamte CSS-Angabe löschen, denn html>body gibt's wohl auch nicht.
 
Zuletzt bearbeitet:
Naja das
Code: 
html>body #submit
ist dafür nur da, dass es im Firefox richtig dargestellt wird, aber vom Internet Explorer nicht, weil der verschachtelte Selektoren nicht versteht.

Was ich jedoch nicht verstehe, dass der Firefox das mit Textarea ganz links anzeigt und dass es ohne Textarea kein Problem bei der Anzeige vom Button gibt...

Hat die Textarea irgendeine komische Anwandlung, das Design zu zerschießen? Normalerweise hab ich kein Problem damit gehabt...
 
Hi,

wenn ich deine Quellcode-Angaben in ein Testdokument (HTML 4.01 Strict) einfüge, kommt das bei mir im Firefox heraus:

Bild 1 mit textarea, Bild 2 ohne textarea - meine Testumgebung: Win2k Prof. SP4, FF 2.0.0.3
 

Anhänge

  • test_falbala_textarea.jpg
    test_falbala_textarea.jpg
    52,3 KB · Aufrufe: 85
  • test_falbala_notextarea.jpg
    test_falbala_notextarea.jpg
    48,3 KB · Aufrufe: 69
²michaelsinterface:

Welche Dokumenttyp-Deklaration hast du verwendet? Ich hab einige ausprobiert, aber irgendwie ändert sich orginal gar NICHTS!
Was kann ich sonst falsch gemacht haben? :(

Ich verwende FF 2.0.0.3 unter Win XP Pro SP2...
 
Zunächst hatte ich mit

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
        "http://www.w3.org/TR/html4/strict.dtd">
getestet.

Aber auch diese Doctypes führen bei mir zum gleichen Ergebnis:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Und selbst wenn ich keinen Dokumenttyp deklariere, ändert sich dadurch im Firefox nichts.
 
Jetzt bin ich drauf gekommen, dass es nichts mit der Dokumenttyp-Deklaration zu tun hat, sondern mit der Schriftgröße()...
Ich habe nämlich übersehen, dass die Style-Angaben für die übergeordnete <div>-Ebene das Ganze auch beeinflussen!
Hierzu folgender Code:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style type="text/css">
#content {
	padding: 5px;
	background-color: #EEE;
	margin: 3px;
	height: 419px;
	border: 1px solid #AAA;
	overflow: auto;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
}
html>body #content {
  height: 426px;
}
label {
 	display: inline;
	float: left;
	font-weight: bold;
	clear: both;
	text-align: right;
	width: 15em;
	margin-right: .5em;
	margin-top: .3em;
	margin-bottom: .4em;
}
#vorname, #nachname {
	display: block;
	width: 15em;
	margin-left: 14em; 
	margin-right: .3em;
	margin-top: .25em;
	margin-bottom: .25em;
	border: 1px solid #CC0000;
}
select, #linuxbox {
	display: block;
	width: 15em;
	margin-left: 14em;
	margin-right: .3em;
	margin-top: .25em;
	margin-bottom: .25em;
	border: 1px solid #CC0000;
}
textarea {
	display: block;
	width: 25em;
	margin-left: 14em;
	margin-right: .3em;
	margin-top: .25em;
	margin-bottom: .25em;
	height: 10em;
	overflow: auto;
	border: 1px solid #CC0000;
}
html>body textarea {
	margin-left: 14.4em;
}
#submit {
	border-width: 2px;
	border-style: ridge;
	background-color: #cc0000;
	border-color: #aa0000;
	color: #EEE;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-left: 15.8em;
	margin-top: 2em;
	width: 16.7em;
}
html>body #submit {
	margin-left: .1em;
	width: 16.6em;
}
</style>
</head>


<body>
<div id="content">
<form name="newpat" action="" method="post">
	<label for="vorname">Vorname:</label>
	<input id="vorname" name="vorname" type="text" value="asfjl" />
	<label for="nachname">Nachname:</label>
	<input id="nachname" name="nachname" type="text" value="fdaslf" />
	<label for="beschreibung">Beschreibung:</label>
	<textarea id="beschreibung" name="beschreibung">Bla bla blu blu</textarea>
	<label for="linuxbox">LinuxBox:</label>
	<select id="linuxbox" name="linuxbox">
		<option>halloooooobox</option>
		<option>omgbox1</option>
		<option selected>linuxbox1</option>
	</select>
	<input id="submit" type="submit" value="Patientendaten &auml;ndern"/>
</form>
</div>
</body>
</html>
Wenn man nämlich jetzt im CSS der Ebene Content die Schriftgröße font-size: 12px auf 13 px setzt, wird es wieder mittig angezeigt, keine Ahnung warum...
Weiß wer Rat?
 
Zuletzt bearbeitet:
Hi,

das Problem ist nicht die Schriftgrösse des übergeordneten Elements, sondern die ID des Submit-Buttons. Tausche
diese mal aus, z.B. submit_1 statt submit.

Ciao
Quaese
 
@Quaese: Das Tauschen des ID-Namen führt bei mir unter Win2000 nicht zum gewünschten Ergebnis - der Submit-Button hängt noch immer am linken Rand. :confused:

Erst wenn ich den margin-left-Wert erhöhe, sitzt er im Firefox an der richtigen Stelle:

Code: 
html>body #whatever {
        margin-left: 14em;
        width: 16.6em;
}
Oder liegt's einfach an den unterschiedlichen Windows-Versionen?
 
Hi,

sehr komisch - vorhin ging es noch, jetzt funktioniert es wieder nicht - bin jetzt ebenfalls konfus. Vielleicht habe
ich auch nur irgendwo vergessen zu aktualisieren - zumindest muss ich meinen Tipp von vorhin zurücknehmen.

Allerdings ist mir aufgefallen, dass ab einer Schriftgrösse von 13 Pixeln offensichtlich der linken Abstand
zu den Labeln gesetzt wird. Ein Setzen der float-Eigenschaft und direkt anschliessendes Zurücknehmen
scheint das Problem zu lösen.
Code: 
#submit {
        float: left;
        clear: both;
	border-width: 2px;
	border-style: ridge;
	background-color: #cc0000;
	border-color: #aa0000;
	color: #EEE;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-left: 15.8em;
	margin-top: 2em;
	width: 16.7em;
}
html>body #submit {
	/*margin-left: .1em;*/
	width: 16.6em;
}
Funktioniert zumindest bei mir unter Win XP und FF 1.5 sowie FF 2.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück