Eigenartiger Abstand verursacht durch Schriftart (IE)

[Xmolch]

Hallo!

Ich habe da ein Paradoxon entdeckt welches mich viel Zeit und Nerven gekostet hat.
Dies steht im Zusammenhang mit diesem Posting http://forum.de.selfhtml.org/?t=33309&m=181172
Dort habe ich erfahren wie man dem <div>-Element die "Mindest-Höhe" der vom naiven IE bestimmt wird wegnimmt, einfach line-height:0px; und font-size:0px;

Nun meine Absicht war unter einem Element (Tabellenzelle) mit einem <div> ein 3pixel-hohen Schatten zu platzieren. Das funktionierte auch pixelgenau aber im IE war noch ein eigenartiger Abstand (4-6px) unter dem <div>-Element zu sehen.
Was hat die Schriftart nun damit zu tun?
Ich habe in einer CSS-Datei . {font-family: 'MS Sans Serif';} gesetzt, damit einfach jeder Text in dieser Schriftart dargestellt wird, ist ja klar.
Ich habe dann festgestellt, dass nachdem ich die Schriftart für das "Schatten-<div>-Element" explizit auf Arial umgestellt hatte dieser eigenartiger Abstand im IE plötzlich verschwunden ist.

Hier ist eine test.html damit ihr euch was vorstellen könnt.
http://mitglied.lycos.de/skoekazi/test.html

Es sind drei Tabellen zu sehen. In der obersten sieht der Sourcecode für den Schatten so aus (Schriftart MS Sans Serif):

<DIV style="background: url('hzn.png') repeat-x;height:3px;line-height:0px;font-size:0px;"></DIV>

In der zweiten Tabelle (Schriftart Arial):

<DIV style="background: url('hzn.png') repeat-x;height:3px;line-height:0px;font-size:0px;font-family:'Arial';"></DIV>

Und noch etwas sehr interessantes, statt die Schriftart zu ändern setzte ich overflow auf hidden (3. Tabelle):

<DIV style="background: url('hzn.png') repeat-x;height:3px;line-height:0px;font-size:0px;overflow:hidden;"></DIV>

Ein echt kurioses Phänomen des Internet Explorers :)

[Struppi]

Nun meine Absicht war unter einem Element (Tabellenzelle) mit einem <div> ein 3pixel-hohen Schatten zu platzieren. Das funktionierte auch pixelgenau aber im IE war noch ein eigenartiger Abstand (4-6px) unter dem <div>-Element zu sehen.

Wieso so kompliziert, du kannst dem DIV dich auch einen Rhamen geben.
z.b. border-bottom:3px solid black;

Struppi.

[Xmolch]

Nun meine Absicht war unter einem Element (Tabellenzelle) mit einem <div> ein 3pixel-hohen Schatten zu platzieren. Das funktionierte auch pixelgenau aber im IE war noch ein eigenartiger Abstand (4-6px) unter dem <div>-Element zu sehen.

Wieso so kompliziert, du kannst dem DIV dich auch einen Rhamen geben.
z.b. border-bottom:3px solid black;

Ich finde bei meiner Methode ist nichts kompliziert, mein Wunsch war auch dass der Schatten semi-transparent ist.

[Mathias Bigge]

Hi Xmolch,
hab's mir mal mit dem IE 5.5 angeguckt, da sehen eins und zwei genau gleich aus. Liegt's vielleicht an irgendeiner Einstellung, die Du vorgenommen hast, oder beziehst Du Dich auf den IE 6?
Viele Grüße
Mathias Bigge

[Xmolch]

Hi Xmolch,
hab's mir mal mit dem IE 5.5 angeguckt, da sehen eins und zwei genau gleich aus. Liegt's vielleicht an irgendeiner Einstellung, die Du vorgenommen hast, oder beziehst Du Dich auf den IE 6?

Hallo

Hm das ist intressant..
Du hast Recht ich beziehe mich auf den 6'er