nicht angemeldet
Hallo,
schaut euch das hier mal an: http://www.audio123.de/download/software/software.html
da ist ganz unten ein #top-Link, der funktiuoniert in Opera nicht, obwohl ich ganz oben in der Sete auch ein <a name="top"> drinnenhabe, der link geht auf #top müsste doch eigentlich gehen ?Weiß jemand warum das in Opera nicht korrekt funktioniert ?
Weil das leere a-Inline-Element in der Zeile mit dem iframe (replaced) bei bei vertical-align:baseline vertikal unten ausgerichtet ist, weil das iframe die Zeile auf 140px Höhe vergrößert:
/---------------------------\
| /---------------------\ | <---- Oberkante der Zeilenbox
| | | |
| | | |
| | | |
| | | |
| | | |
| _ | | | <---- Operas Sprunghöhe
||_|---------------------/ |
---------------------------/
Die äußere Box ist die Tabellenzelle, die innere große Box der iframe, daneben links das a-Element, welches aber eine Breite 0 hat und demnach nicht wie im Schema sichtbar ist. Sobald es Inhalt bekommt, liegt es auch nicht mehr dort, sondern in einer Zeilenbox über dem iframe, weil der iframe mit width:100% so breit ist wie die Zelle und daher kein Text neben sich duldet.
Ohne vertical-align-Angabe wird der iframe genauso wie img, object und input standardmäßig auf der Basislinie ausgerichtet. Opera springt nun nicht den oberen Rand der Zeilenbox der zugehörigen anonymen Inline-Box an (diese geht bei vertical-align:baseline von der Oberkante des iframes bis zur Unterkante der a-Inline-Box), sondern den des a-Elements.
Abhilfe wäre freilich vertical-align:top für das jeweilige replaced Inline-Element.
Zur Verdeutlichung:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border:1px solid red;"><a name="top" style="background-color:red;">y</a><iframe src="leer.html" style="border:1px solid red;" frameborder="0" scrolling="no"></iframe></td>
</tr>
</table>
Verallgemeinert:
<div style="border:1px solid red; font-family:sans-serif">
<span style="background-color:yellow">µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê</span><br>
<span style="background-color:teal">µ Ê <a name="top" style="background-color:silver">µ Ê</a> µ Ê<img src="empty.gif" width="200" height="100" alt="">µ Ê</span><br>
<span style="background-color:yellow">µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê µ Ê</span>
</div>
Jeweils mit und ohne vertical-align:top für den iframe/das Bild.
MSIE macht es falsch, indem er alle Inline-Boxen auf die Zeilenboxhöhe anpasst, das stört aber nicht. Opera 7.23 setzt vertical-align:bottom falsch um, Opera 7.5p2 setzt vertical-align:top nicht um, dafür aber vertical-align:text-top.
Warum aber überhaupt so umständlich? Ein leeres a-Element am Dokumentanfang direkt nach dem body-Tag sollte keine Zeilenbox erzeugen und in Transitional wäre es valide. Noch einfacher natürlich die id für body.
Mathias