Kniffliges ("unlösbares"?) Problem: Underline-/Overline-Farbe ändert sich mit Link

fallencookie · #1 (**permalink**) 14.08.2013, 13:58

Hallöchen (: Ich hoffe, ich bin hier richtig.
Ich hab sehr lange gesucht, um einen CSS-Code zu finden, der die Farbe eines Ober- & Unterstrichs bei Test ändert ( text-decoration: underline overline; ) – nachdem ich immer wieder gelesen hatte, das sei nur mit "border" zu erreichen, was ich aber jedes Mal anpassen müsste, je nachdem wie lang das Wort ist.
(Zumindest hatte ich diesen Eindruck. Gibt es auch eine Möglichkeit, das "border" nur auf den Text anzuwenden, sodass der Rahmen oben & unten automatisch so lang ist wie der Text?)

Mit diesem einfachen Code ist es möglich:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Das style-Element</title>
<style type="text/css">
.underline {
color:#EFF2FB;
text-decoration: underline overline;

}
.text {
color:#000000;
}
</style>
</head>
<body>
<div class="underline"><span class="text"> Text mit weißem Ober- & Unterstrich </span></div>
</body>
</html>

Ich war erst mal total glücklich damit, dass nun Ober- & Unterstrich weiß waren, NUR möchte ich nun aus dem normalen Text einen Verweis machen, mit dem gängigen <a href> usw.
Der Fox zeigt auch alles perfekt an, Safari dagegen macht Ober- & Unterstrich wieder schwarz… Kann man das irgendwie umgehen, oder wirds von Safari einfach nicht unterstützt? Gibt es vielleicht sogar eine Alternative zum Verlinken? Ich weiß, das ist nur ein winziger Schönheitsfehler, aber ich bin Perfektionist… also, falls irgendjemandem etwas dazu einfällt, immer her damit! (:

programm · #2 (**permalink**) 14.08.2013, 14:04

Schon probiert, dem Link die text-decoration zu verpassen?

Code:

.underline a {
    color: #EFF2FB;
    text-decoration: underline overline;
}

explanator · #3 (**permalink**) 14.08.2013, 14:32

Getestet in IE8, FF22, Chrome und Safari(Windows)

HTML-Code:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Das style-Element</title>
    <style type="text/css">
        .underline a{
        color: yellow;
        text-decoration: underline overline;
        }
        .text {
        color:#000000;
        }
    </style>
</head>
<body>
    <p class="underline">
        <a href="./" >
            <span class="text">
                 Text mit weißem Ober- & Unterstrich 
            </span>
        </a>
    </p>
</body>
</html>

Bitte diesen Doctype nächstes Mal verwenden und die Zeichenkodierung mit angeben.
In Blockelemente wie DIV schreibt man keinen Text, dazu sind die Textelemente da.

fallencookie · #4 (**permalink**) 14.08.2013, 14:39

Nun ja, das Problem ist, dass das Ganze die HTML-Seite eines Forums ist, was mit FileZilla verwaltet wird & ich die Links im "Admin Control Panel" des Forums (WBB Lite) hinzufügen muss… (Ich hoffe, das is verständlich.)
Hab mal versucht, das CSS auf die HTML-Seite zu schmeißen und im ACP beim Link anzuwenden (mit <span class="underline a">, denke ich? Sorry, bin noch Neuling in Bezug auf CSS & oft unsicher) – klappt nicht ._. Oder meintest du etwas anderes?

fallencookie · #5 (**permalink**) 14.08.2013, 14:48

Zitat:

Zitat von explanator

Getestet in IE8, FF22, Chrome und Safari(Windows)

HTML-Code:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Das style-Element</title>
    <style type="text/css">
        .underline a{
        color: yellow;
        text-decoration: underline overline;
        }
        .text {
        color:#000000;
        }
    </style>
</head>
<body>
    <p class="underline">
        <a href="./" >
            <span class="text">
                 Text mit weißem Ober- & Unterstrich 
            </span>
        </a>
    </p>
</body>
</html>

Bitte diesen Doctype nächstes Mal verwenden und die Zeichenkodierung mit angeben.
In Blockelemente wie DIV schreibt man keinen Text, dazu sind die Textelemente da.

Uh, sorry, glatt überlesen.
Und danke. Wie gesagt, bin absoluter Neuling & bastel mir hier etwas zusammen ^^" Das mit dem div kam mir auch sehr seltsam vor, hab's so kopiert & das war der einzige Code, der ging…

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem bei Link Pseudo - Elemente innerhalb ID	vidar	CSS	2	16.02.2007 11:16
Kann Text und Link keine Farbe zuweisen?!	tronix	CSS	5	06.02.2007 15:21
Einfacher Link -> Unglaubliches Problem	VanKurt	CSS	1	29.09.2006 09:57
Problem mit Hintergrund vom Sidebar!	Pumpkin	CSS	2	01.04.2006 04:14
Problem mit Hintergrund-Grafik für CSS-Links!	Pumpkin	CSS	5	13.10.2005 15:13