Hi,

Es scheint, als ob der PC Internet Explorer (Version 6) bei mehrzeiligen Links, die ein background-image zugewiesen bekommen haben, den am weitesten an der linken Seite stehenden Punkt als Nullpunkt interpretiert. Auch wenn der in der 2. oder 3. Zeile des Links steht. Zu bestaunen ist dieses Phänomen unter http://www.mathias-volz.de/linkIntTest.html . Das Pfeil-Symbol, mit CSS-Eigenschaft 'background-position:0px 0px;'  wird bei allen anderen getesteten Browsern, außer eben IE, angezeigt.

"The tiling and positioning of the background-image on inline elements is undefined in this specification. A future level of CSS may define the tiling and positioning of the background-image on inline elements."

http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

bzw. für CSS 2:

'background-position'
    [...]
    Applies to:   block-level and replaced elements

http://www.w3.org/TR/REC-CSS2/colors.html#propdef-background-position

bzw. für CSS 1:
5.3.6    'background-position'
[...]
Applies to: block-level and replaced elements

http://www.w3.org/TR/REC-CSS1#background-position

Also suchs Dir raus, ob background-position für den Anker nicht-definiert ist (CSS 1, CSS 2) oder aber nicht-definiertes Verhalten hat (CSS 2.1).

cu,
Andreas

Hi!

Es scheint, als ob der PC Internet Explorer (Version 6) bei mehrzeiligen Links, die ein background-image zugewiesen bekommen haben, den am weitesten an der linken Seite stehenden Punkt als Nullpunkt interpretiert. Auch wenn der in der 2. oder 3. Zeile des Links steht. Zu bestaunen ist dieses Phänomen unter http://www.mathias-volz.de/linkIntTest.html . Das Pfeil-Symbol, mit CSS-Eigenschaft 'background-position:0px 0px;'  wird bei allen anderen getesteten Browsern, außer eben IE, angezeigt.

Gibt es eine CSS-Lösung, mit der man dem IE beibringen kann dass er bitte von oben links aus rechnen soll?

Eine Variante wäre diese (nur der CSS-Teil):

<style type="text/css">
body{
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
}
a{
   text-align:left;
}
a span{
   display: block;
   padding-left: 10px;
   background: transparent url(linkInt.gif) no-repeat;
   display: inline;
}
</style>

Der Haken an der Sache ist, dass sie nicht ohne (semantisch unkorrektes) zusätzliches Markup funktioniert - nämlich:

<div style="width: 100px;">
This is a text with a <a href="bl.html"><span>&nbsp;</span>multiline link (bla bla bla)</a>, with IE showing its very own interpretation, once again.
</div>

Meine Meinung ist ja, dass man (leider) heutzutage noch Kompromisse in diesem Punkt eingehen muss, weil leider immer noch zu wenig standardkonforme Browser genutzt werden.

Ob dir dieses Gimmick die Sache wert ist oder nicht, ist ja deine Entscheidung.

Gruß Gunther