CSS Problem mit a:active

Saugkraft

Saugkraft

Aktives Mitglied
Thread Starter
Dabei seit
20.02.2005
Beiträge
8.998
Reaktionspunkte
3.190
Hallöchen,

ich hab ein seltsames CSS Problem. Ich habe in einer CSS Datei folgendes definiert:

Code: 
body {font-family: Arial, Helvetica, sans-serif;}
a:link, a:visited {text-decoration: none; color: #0000cc;}
a:hover, a:active {text-decoration: underline; font-weight: bold; color:#0000cc;}

#footer {color: #ffffff; background: #ff99ff;}
#footer a:link, a:visited {text-decoration: none; color: #ffffff;}
#footer a:hover, a:active {text-decoration: underline; color: #ffffff;}

Wenn ich die folgende Seite aufrufe..
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" media="screen" href="test.css" />
</head>
<body>

  <div><a href="#">Hier gibt's ein Problem!</a></div>
<br />
  <div id="footer">
    <a href="#">Hier liegt die Ursache.</a></small>
  </div>
   
</body>
</html>
..wird beim aktivieren der obere Link weiß, statt wie definiert blau. In Firefox fällt es nicht so auf, weil das Phänomen nur auftritt, wenn man die Maustaste gedrückt hält.

Im IE 7 bleibt der Link allerdings aktiviert und damit weiß. Lasse ich den #footer weg, passt es mit der Farbe.

Hab ich Blödsinn programmiert oder warum passiert das?

Hier hab ich's mal zum Testen hochgeladen.
 
Das ist ein Problem der CSS-Spezifität Deiner Selektoren. Da der Selektor #footer a.link laut Kaskade eine höhere Spezifität als a.link hat, wird dieser verwendet.

Näheres zur Gewichtung: http://de.selfhtml.org/css/formate/kaskade.htm

Lösung: Vergib einfach Klassen für die Links, z. B. a.content:link und a.footer:link.

2nd
 
Ich nehme an, es sollte so heißen:

Code: 
body 
{
font-family: Arial, Helvetica, sans-serif;
}

a:link, 
a:visited 
{
text-decoration: none; 
color: #0000cc;
}

a:hover, 
a:active 
{
text-decoration: underline; 
font-weight: bold; 
color:#0000cc;
}

#footer 
{
color: #ffffff; 
background: #ff99ff;
}

#footer a:link, 
#footer a:visited 
{
text-decoration: none; 
color: #ffffff;
}

#footer a:hover, 
#footer a:active 
{
text-decoration: underline; 
color: #ffffff;
}
Übrigens: es sieht blöd aus, wenn die Links beim Mouseover durch das bold hin und herzucken!
 
hmm, wieso gibt es hier kein Durchgestrichen-Tag im vBulletin-Code?

[stimmt_nicht]
Manjo, CSS funktioniert generell mit den Nachfahrenselektoren ohne Angabe des Elternelements bei gruppierten Elementen: #footer a:link, a:visited, usw.

#footer a:link, #footer a:visited ist redundant und hat denselben Effekt.

Also

#footer a:link, a:visited, usw. [size=+1]=[/size] #footer a:link, #footer a:visited, #footer usw.

aber macht weniger Tipparbeit und erleichtert die Pflege der Styles.
[/stimmt_nicht]

2nd
 
Zuletzt bearbeitet:
2ndreality schrieb:
#footer a:link, a:visited, usw. [size=+1]=[/size] #footer a:link, #footer a:visited, #footer usw.
Zum Vergrößern anklicken....

Das ist so nicht richtig. Dann müsste ja
PHP: 
<p>
	Hier kommen ein schwarzes <strong>strong</strong> und ein schwarzes <em>em</em>.
</p>
<p id="green">
	Hier kommen ein grünes <strong>strong</strong> und ein grünes <em>em</em>.
</p>

mit folgendem Stylesheet
Code: 
#green strong, em {
	color: green;
}
stimmen - tut es aber nicht. Die gruppierten Selektoren sind unabhängig voneinander.

Marcel
 
Stimmt :eek:

Sorry, war ich wohl zu schnell...

2nd
 
2ndreality schrieb:
Das ist ein Problem der CSS-Spezifität Deiner Selektoren. Da der Selektor #footer a.link laut Kaskade eine höhere Spezifität als a.link hat, wird dieser verwendet.
Zum Vergrößern anklicken....
Cool. Danke. Sowas in der Art dachte ich mir schon. BTW: Warum gibt es hier eigentlich keinen "mir-geht-ein-Licht-auf"-Smiley? ;)

Den Link muss ich mir allerdings noch 2-3 mal zu Gemüte führen, bis ich das kapiert hab. :D

Manjo schrieb:
Übrigens: es sieht blöd aus, wenn die Links beim Mouseover durch das bold hin und herzucken!
Zum Vergrößern anklicken....
Naja, ist nicht ideal, aber ich setz das bei uns im Intranet mit nem dreieckigen Pfeil davor ein. Bis auf wenige Ausnahmen sieht es IMHO besser aus als von vornherein fett oder nur unterstichen.
 
Nee Saugkraft, das stimmt so nicht ganz, was ich oben geschrieben habe. Jedenfalls nicht in dem Zusammenhang mit dem von Dir geposteten Markup/CSS.

Aufgrund Deiner nicht korrekten Gruppierung überschreibt die 2. a:active Regel die 1. im Body-Bereich der Seite, deswegen werden alle Links weiss, wenn man drückt.

Du musst für jede Pseudoklasse im Footer den Vorfahren (#footer) mit angeben, so wie Manjo es gepostet hat.

2nd
 
Ah, jetzt, ja. Eine Insel. Schon wieder fehlt der Smiley. :D

Nochmal zusammengefasst also:

a:active {Definition A}
#footer a:link, a:active {Definition B}

ist das gleiche wie

a:active {Definition A}
#footer a:link {Definition B}
a:active {Definition B}

Und das zweite a:active überschreibt das erste. Oder: ein Komma ist noch keine Klasse. ;) Vollkommen logisch, aber leicht zu überlesen. Hab das in deinem Post auch glatt überlesen Manjo. Kleiner Schreibfehler, große Wirkung. ;) Danke euch.
 
Jup, das ist :)

Bei gruppierten Selektoren müssen die kompletten "Pfade" der Elemente angegeben werden.

2nd
 
Zurück
Oben Unten