Vererbung von vertical-align / Darstellungsprobleme
Klaus Freyer
- css
0 Hilker
Hallo,
ich habe eine Frage zur Verebung beim Attribut vertical-align und der unterschiedlichen Darstellung in Firefox und IE/Opera.
Hier der Quelltext:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000">
Test 1234 Test 1234 Test 1234 Test 1234 Test 1234 Test 1234 Test 1234<br>
1234 Test 1234 Test 1234 Test 1234 Test 1234 Test 1234 Test 1234 Test<br>
123<a href="#" style="vertical-align:top">
<img style="border: 1px solid black;" src="http://groups.google.de/groups/img/groups_medium_de.gif" border="0">
</a>456<br>
</body>
</html>
Das a-Element erhält das Attribut vertical-align:top. Wenn ich richtig gelesen habe, wird dieses Attribut laut W3C nicht weitervererbt. D.h. das Element <img> müßte in diesem Fall die standardmäßige Ausrichtung baseline erhalten.
Warum wird das Element <img> im IE/Opera trotzdem top ausgerichtet? Warum überlappt in Firefox das Bild den Text?
Meiner Meinung nach sind beide Darstellungsmethoden falsch. Normalerweise müßte die Unterkante des Bildes doch auf der Baseline des Textes enden und das Bild dürfte den anderen Text nicht überlappen (also quasi wie die Darstellung im Firefox, nur daß das Bild und der Text etwas tiefer sitzen müßten).
Wer weiß weiter?
123<a href="#" style="vertical-align:top">
<img style="border: 1px solid black;" src="http://groups.google.de/groups/img/groups_medium_de.gif" border="0">
</a>456<br>
</body>
</html>
Warum wird das Element <img> im IE/Opera trotzdem top ausgerichtet? Warum überlappt in Firefox das Bild den Text?
weil Firefox, der einzige ist, der das alles richtig interpretiert.
das bild steht "baseline" zum link. also auf der selben "baseline" da es ja vom link eingeschlossen ist.
Meiner Meinung nach sind beide Darstellungsmethoden falsch. Normalerweise müßte die Unterkante des Bildes doch auf der Baseline des Textes enden und das Bild dürfte den anderen Text nicht überlappen (also quasi wie die Darstellung im Firefox, nur daß das Bild und der Text etwas tiefer sitzen müßten).
Wer weiß weiter?
etwas tiefer sitzt das bild, wenn du es mit vertical-align: top ausrichtest.
mfg Hilker
123<a href="#" style="vertical-align:top">
<img style="border: 1px solid black;" src="http://groups.google.de/groups/img/groups_medium_de.gif" border="0">
</a>456<br>
</body>
</html>Warum wird das Element <img> im IE/Opera trotzdem top ausgerichtet? Warum überlappt in Firefox das Bild den Text?
weil Firefox, der einzige ist, der das alles richtig interpretiert.
das bild steht "baseline" zum link. also auf der selben "baseline" da es ja vom link eingeschlossen ist.
Also gilt, daß vertical-align eigentlich nicht an Kindelemente vererbt wird?
Meiner Meinung nach sind beide Darstellungsmethoden falsch. Normalerweise müßte die Unterkante des Bildes doch auf der Baseline des Textes enden und das Bild dürfte den anderen Text nicht überlappen (also quasi wie die Darstellung im Firefox, nur daß das Bild und der Text etwas tiefer sitzen müßten).
Wer weiß weiter?
etwas tiefer sitzt das bild, wenn du es mit vertical-align: top ausrichtest.
Vielleicht haben wir uns da mißverstanden. Mit tiefer sitzen meine ich sowohl Text als auch Bild. D.h. die Oberkante des Bildes soll bei Firefox soweit runterrutschen, daß das Bild gerade nicht mehr den darüberliegenden Text verdeckt. Die Baseline-Ausrichtung zw. Text und Bild kann der Browser ja immer noch erzielen, indem er den Text halt auch mit runterzieht. Wenn Du aus dem Quelltext mal das <a>...</a> Element entfernst, siehst Du, was ich meine.
Daher meine Frage, ob das mit der Überlappung in Firefox wirklich korrekt ist.
Gruß
Klaus