• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

ie7/8 bug - span/label wird nicht richtig ausgerichtet

P

pad8626

New member
Hi,

ich habe ein Problem mit einem Formular und darin enthaltenen Div > span / label - Elementen...
Im Normalfall sollten in einem div -> alle inline elemente sofern nicht anders definiert auf gleicher höhe ausgerichtet werden... Im IE7 / 8 funktioniert das aber irgendwie nicht... Siehe Beispiel:

Code: 
<html>
<head>
<title>test</title>
<style>
* {
vertical-align:baseline;
}

</style>
</head>
<body>
	<div>
		<form>
			<div style="border:1px solid black;" >
				<span style="border:4px solid red" >Suche:</span>
				<input type="text" style="border:4px solid green;" />
				<input type="submit" style="border:4px solid blue" />
			</div>
		</form>
	</div>
</body>
</html>

Warum funktioniert dies nicht und welcher BUG oder vielleicht auch Fehler von mir ist es?? Ich habe schon ne ganze weile rumprobiert aber bis jetz nur Lösungen gefunden wo ich für den IE eine separate Datei anlegen müsste.. Bei einem solch simplen Beispiel müsste es doch aber auch ohne funktionieren ??
 
http://www.css4you.de/Texteigenschaften/vertical-align.html schrieb:
[...] - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen.
Zum Vergrößern anklicken....
Probiere mal
PHP: 
<span style="border:4px solid red;float:left;" >Suche:</span>
<input type="text" style="border:4px solid green;float:left;" />
<input type="submit" style="border:4px solid blue;float:left;" />
 
Mit der Angabe eines korrekten Doctypes hast Du natürlich recht, kkapsner.
Wobei die Frage im Raum steht, ob es ein Bug der IE's ist, oder ob die das einfach nur korrekt umsetzen, da vertical-align tatsächlich ein Textformatierungsdingens ist.
Muss allerdings gestehen, dass ich zu faul zum Testen bin...

Edit: Habe mal in einem meiner Bücher nachgesehen (O'Reilley - CSS kurz & gut).
Baseline ist bei vertical-align sowieso der Startwert.
Zudem wird mit
PHP: 
*{vertical-align:baseline;}
JEDES Element im Dokument angesprochen, was ja wohl nicht sein soll?
 
Zuletzt bearbeitet:
hm okay das ist nicht so das was ich erhofft habe ;)... Das mit dem float naja gut mag gehen aber da muss ich dem div auch ne feste breite zuweisen... Die inline Elemente sollten aber von Haus eigentlich in Reih in Glied stehen und nicht horizontal irgendwie verschoben sein oder??

das stück war einfach nur zur Demonstration des Problems gedacht das manche so kleinlich sind hät ich jetz nicht gleich gedacht im übrigen im Original Dokument ist der doctype Xhtml Strict... Was dem ganzen nix zur Sache tut, da es dort immer noch genau so nicht geht... Und mit dem vertical-align:baseline wollt ich nur demonstrieren und vorweg nehmen das alle Elemente nicht irgendwie horizontal speziell ausgerichtet sind

mit Doctype funktioniert es in ie8 auch mit diesem kleinen beispiel aber ie7 belässt es dabei...

danke schon mal
 
Zuletzt bearbeitet:
Also, was ich rausgefunden habe ist, das die Browser z.B. beim Submit unterschiedliche Dimensionen rendern.
Am Besten den in Frage kommenden Elementen die selbe Höhe geben.
Auch die Font-Size ist wahrscheinlich nicht außer 8 zu lassen.
Ebenso wie margin, padding.
Man bekommt das mit Sicherheit einheitlich hin, ist aber, wie so oft, nicht mit zwei, drei Zuweisungen hinzukriegen.

btw, habe auch den IE6 bemüht...
 
hm ok ie6 ist egal muss ab ie7 kompatibel sein ;)... aber ich probier das mit der höhe mal wenn nicht bekommt der ie7 wie üblich seine extra wurst...
 
pad8626 schrieb:
das stück war einfach nur zur Demonstration des Problems gedacht das manche so kleinlich sind hät ich jetz nicht gleich gedacht

mit Doctype funktioniert es in ie8 auch mit diesem kleinen beispiel aber ie7 belässt es dabei...
Zum Vergrößern anklicken....
Eine gescheite Doctype ist bei CSS-Darstellungsproblemen das Lösungsmittel Nummer 1... deswegen bin ich da immer "kleinlich" - und im IE 8 war's ja auch das Problem.

Beim IE 5-7 hilft ein display: inline-block;
 
kkapsner schrieb:
Beim IE 5-7 hilft ein display: inline-block;
Zum Vergrößern anklicken....
Das inline-block löst zwar die Positionierung auf der Baseline, aber nicht die unterschiedlichen Darstellungen der jeweiligen Höhen.
vertical-align.jpg
 
Ich dachte es geht nur um die Baseline...? Bei der Höhe hast du natürlich recht: da muss man alles per Hand einstellen, damit es überall ähnlich aussieht (gleich schafft man sowieso nicht - man bedenke nur diese komischen blauen Ränder im Safari wenn man ein Textfeld selektiert...).
 
Ich weiß es auch nicht mehr...
Wegen dem ganzen Borderkrams dachte ich einfach, es soll alles gleich hoch sein?
 
also ich hab es jetz zu 90% hinbekommen diese Lösung reicht mir auch...

ich habe jedes einzelne Element mit vertical-align:middle ausgerichtet und dann passt es... Zwar stellt der IE7 den Submit grundsätzlich ein wenig größer dar wie alle anderen Browser aber damit kann ich leben...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben