DJM: feine Unterstreichungen (1 Pixel Linienbreite)

Hallo Forum,

die folgende Style-Definition erzeugt bei mir in allen Browsern den gewünschten unterstrichenen Text mit 1 Pixel Linienbreite:

<span style="font-family:arial,sans-serif;font-size:24px;font-weight:bold;border-bottom:1px solid;">ABC</span>

Ich erzeuge den Unterstrich absichtlich NICHT mit "text-decoration:underline", weil ich trotz fetter Schrift und großer Fontsize einen 1 Pixel dünnen Unterstrich haben möchte. Der Mozilla würde bei "underline" nämlich eine fette Linie ausgeben.

Ich suche nun jedoch nach einem besseren Weg, die Linie im Mozilla dünn zu kriegen. Meine o.g. Methode hat nämlich einen Haken: Wenn ich die obige Zeile in eine einfache Tabellenzelle ohne height-Angabe packe, verschwindet im IE plötzlich die Unterstreichung, und zwar offenbar unter dem Zellenrand. (eine Zelle mit ausreichend großer height-Angabe lässt die Unterstreichung wieder erscheinen).

Als Gegenmaßnahme könnte man wiederum ein 1-Pixel-Blank-Image unter die Linie packen, aber das ist auch nicht gerade effizient. Wer weiß 'ne bessere Lösung?

Gruß
Matthias

  1. hi,

    Als Gegenmaßnahme könnte man wiederum ein 1-Pixel-Blank-Image unter die Linie packen, aber das ist auch nicht gerade effizient.

    nein, natürlich nicht - sowas ist doch pfui-bah, wir haben doch CSS.

    und für abstände nehmen wir da doch bekanntlich margin (am element selbst) bzw. padding (für die tabellenzelle), nicht wahr?

    schon damit probiert ...?

    gruß,
    wahsaga

    --
    I'll try being nicer if you'll try being smarter.
    1. Hallo wahsaga!

      Padding für die Zelle funktioniert, ich will aber das Element selbst "gefügig" machen, nicht die Zelle. Und da raff ich nicht, was ich angeben muss. margin-bottom oder padding-bottom funktionieren nicht.

      1. Hallo wahsaga!

        Padding für die Zelle funktioniert, ich will aber das Element selbst "gefügig" machen, nicht die Zelle. Und da raff ich nicht, was ich angeben muss. margin-bottom oder padding-bottom funktionieren nicht.

        Veruch mal mit line-height:<Schriftgröße>

        --
        Gruss Martin