[CSS] a:active werkt niet (FF en IE)

[ChroMe]

Cascading Stylesheet:

.tabellinks a:link {
    border-left:4px solid #345B80;
    text-decoration: none;
    color: #FFFFFF;
    padding:0px 0px 0px 1px;
}

.tabellinks a:visited {
    border-left:4px solid #345B80;
    text-decoration: none;
    color: #AAAAAA;
    padding:0px 0px 0px 1px;
}

.tabellinks a:hover {
    border-left:4px solid #FF9900;
    text-decoration: none;
    color: #FFFFFF;
    padding:0px 0px 0px 1px;
}

.tabellinks a:active {
    border-left:4px solid #AA0000;
    text-decoration: none;
    color: #FF9900;
    padding:0px 0px 0px 1px;
}

.tabeltop a:link {
    border-bottom:2px solid #345B80;
    text-decoration: none;
    color: #FFFFFF;
}

.tabeltop a:visited {
    border-bottom:2px solid #345B80;
    text-decoration: none;
    color: #AAAAAA;
}

.tabeltop a:hover {
    border-bottom:2px solid #FF9900;
    text-decoration: none;
    color: #FFFFFF;
}

.tabeltop a:active {
    border-bottom:2px solid #AA0000;;
    text-decoration: none;
    color: #FF9900;
}

Da's m'n CSS stijl, ik heb een balk met links bovenaan waarop de .tabeltop class van toepassing is, en een balk links waarop de .tabellinks class van toepassing is...

Iemand een idee waarom m'n a:active niet werkt?! (zowel in IE als FF werkt het niet)

Grtz

André: Ik heb even de overbodige code weggehaald omdat die niets toevoegt, verder hoef je niet onder je topic te groeten

[ Voor 25% gewijzigd door André op 04-01-2006 23:11 ]

[Guldan]

Hoort het niet te zijn "tabelink : active". Werkt bij mij wel iig. hetzelfde geldt voor hover etc.

[ Voor 28% gewijzigd door Guldan op 04-01-2006 20:53 ]

[Verwijderd]

Met simpele testjes werkt het hier in IE6 en FF1.5, zie screenshots van FF.

HTML:

<div class="tabellinks">
  <a href="#">hello world</a>
</div>

HTML:

<table class="tabellinks">
  <tbody>
    <tr>
      <td>
        <a href="#">hello world</a>
      </td>
    </tr>
  </tbody>
</table>

Stap voor stap debuggen lijkt me de best aanpak. Begin met een kaal html-document en dan stap voor stap elementen toevoegen en dan kijken wanneer het fout gaat. Met de CSS lijkt op het eerste gezicht weinig mis.

[ Voor 34% gewijzigd door Verwijderd op 04-01-2006 21:13 ]

[JHS]

Wat onezero zegt: reduceer je lap code eerst eens tot alleen de code waar het probleem in zit, ook qua HTML en eventuele js. Met al deze code eromheen is het onmogelijk om te zien waar het probleem nu precies zit. Kortom: bouw een testcase. Als het niet werkt, kan je hier de code posten, incl. HTML, en kunnen wij aangeven waar wij denken dat het mis gaat. Als het wel werkt, pas dan de zo gevonden code toe in in je hele document. Werkt het daarna niet, begin dan weer met de testcase, en voeg dan stukje bij beetje de rest van je code toe. Dan zou je vanzelf het probleem moeten tegenkomen . Oh, en let erop dat een :active maar heel kort zichtbaar kan zijn.

[ChroMe]

Het werkte toen al mijn links nog gewoon # waren (ik werk met dreamweaver)... maar nu ik de links veranderd heb naar pagina's die bestaan gebeurt volgens mij het volgende:
ik ga erover a:hover treed in werking, ik klik erop a:active werkt maar dan laadt hij de nieuwe pagina en zien alle links er weer hetzelfde uit... (ik werk dus niet met frames ofzo. Is er dan nog een mogelijkheid om de actieve link te laten zien?)

alvast bedankt

[Sappie]

ChroMe schreef op donderdag 05 januari 2006 @ 13:10:
ik ga erover a:hover treed in werking, ik klik erop a:active werkt maar dan laadt hij de nieuwe pagina en zien alle links er weer hetzelfde uit...

Zo werkt het inderdaad. Quote van W3 mbt :active pseudo class:

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

Click maar eens op een link en beweeg er, de muisknop ingedrukt houdend, van weg. De kleur die de link dan heeft is die kleur die opgegeven is met behulp van de :active pseudo-class.

[Verwijderd]

Owww, op die spreekwoordelijke fiets!

Als je wilt aangeven dat een link bezocht is, kun je de :visited pseudo-class gebruiken. Als je een link alleen gearceerd wilt hebben op het moment dat de pagina wordt bezocht, dan zul je dat per pagina moeten aangeven (door bijvoorbeeld een andere class toe te kennen aan de link). Met de hand of met client- of serverside scripting.

[Tjeemp]

de volgorde is heel belangrijk bij link styles...

a:link
a:visited
a:active
a:hover

in die volgorde werkt het wel...

[ZeilDude]

Heb je al wel gezien dat er in regel 48 een dubbele semicolon staat?

[JHS]

timovdz: Het punt was juist dat de :active niet te zien was. Door de :hover ná de :active te zetten, zou bij het hoveren over een link nadat er op geklikt was de :active style juist niet zichtbaar zijn. Het probleem zat 'em in het feit dat de TS de werking van :active verkeerd begreep .