[css]psuedo class werkt niet

[Roeligan]

Ik heb een tabel met de class menu:

HTML:

<table class="menu">
    <tr>
        <td><a href="#self#circuit.action" class="menu">Home</a></td>
        <td><a href="#self#changelog.show">Changelog</a></td>
        <td align="right" class="menuSmall">U bevint zich hier &raquo; <a href="#self#circuit.actie" class="menuSmall">home</a> &raquo; #fusebox.circuit# &raquo; #fusebox.fuseaction#</td>
    </tr>
</table>

met daar de css:

Cascading Stylesheet:

[...]
a:link
        {
        text-decoration: none;
        color: #000000;
        }
[...]
.menu, a.menu:link
        {
        height: 15px;
        background-color: #154A9A;
        font-weight: bold;
        font-size: 8pt;
        text-decoration: none;
        color: #FFFFFF;
        }

Ik heb tevergeefs ook de volgende syntax geprobeerd:

Cascading Stylesheet:

a:link.menu

Volgens w3 standaarden zou dit meoten werken... echter in zowel IE als FireFox werkt het niet, ik krijg zwarte links (wel met juiste font-size en font-weight )

[Verwijderd]

Dit is de link: <a href="#self#circuit.actie" class="menuSmall">
En je selector is dit: .menu

Nogal wiedes dat het niet werkt, toch? :-)

[Roeligan]

Er staan nog meer links in met andere classes, die ene is als voorbeeld (de 1^e)

[ Voor 12% gewijzigd door Roeligan op 20-10-2004 12:16 ]

[André]

Dit doet het bij mij overal prima, ik denk dat er ergens in je css een { of } vergeten is

Heb je de complete pagina online?

[ Voor 20% gewijzigd door André op 20-10-2004 12:45 ]

[Roeligan]

Dit is de complete CSS:

Cascading Stylesheet:

body
        {
        text-align: center;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
        font-family: Verdana, Arial, Tahoma, Helvetica;
        font-size: 8pt;
        }

a:link, a:visited, a:active
        {
        color: #000000;
        }
a:hover
        {
        text-decoration: none;
        color: #000000;
        }

input, select, textarea
        {
        font-size: 8pt;
        font-family: Verdana;
        }
/*  Backgroundcolor of main document    */
.main
        {
        background-color: #7A9AC9;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: center;
        }

/*  Workspace (commonly based on 800*600 resolution)    */
.screen
        {
        background-color: #FFFFFF;
        background-image: url(../img/bghome.jpg);
        text-align: center;
        height: 100%;
        width: 750px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        margin-bottom: 0px;
        border-collapse: collapse;
        border-style: solid;
        border-width: 2px;
        border-color: #154A9A;
        font-size: 8pt;
        }

.header
        {
        height: 50px;
        background-image: url(../img/top.jpg);
        }

.menu, a.menu:link
        {
        height: 15px;
        background-color: #154A9A;
        font-weight: bold;
        font-size: 8pt;
        text-decoration: none;
        color: #FFFFFF;
        }

.menuSmall, a:link.menuSmall
        {
        font-weight: normal;
        color: #FFFFFF;
        }

.footer
        {
        height: 15px;
        background-color: #154A9A;
        font-size: 8pt;
        color: #FFFFFF;
        }

Ik heb de pagina niet online, alleen nog op onze ontwikkel server.

Ik kan uiteraard in de href zetten:

HTML:

<a href="blaat" style="font: #FFFFFF;">

Maar das niet de bedoeling....

[ Voor 5% gewijzigd door Roeligan op 20-10-2004 13:33 ]

[André]

Het heeft met onderstaande regel te maken:

code:

a:link, a:visited, a:active
{
  color: #000000;
}

Die is specifieker dan de .menu, a.menu:link dus die krijgt 'voorrang'

RM-rf zijn oplossing is het natuurlijk

[ Voor 16% gewijzigd door André op 20-10-2004 13:56 ]

[T-MOB]

Allicht heeft het er mee te maken dat je zelf alle links al een keer gevolgd hebt. De "link" pseudoclass heeft alleen betrekking op unvisited links nietwaar...

[edit]
ism met wat André zegt dus... a.menu:link is natuurlijk wél specifieker dan a:link.

[ Voor 33% gewijzigd door T-MOB op 20-10-2004 14:01 ]

[RM-rf]

ik vermoed dat

code:

.menu, a.menu:link, .menu, a.menu:visited

wél zou werken

[T-MOB]

RM-rf schreef op 20 oktober 2004 @ 13:53:
ik vermoed dat

code:

.menu, a.menu:link, .menu, a.menu:visited

wél zou werken

mierenneuk modus:
Dat zou dan:

code:

.menu, a.menu:link, a.menu:visited

of

code:

.menu a.menu:link, .menu a.menu:visited

moeten zijn...

[Roeligan]

Idd thx RM-RF

Logisch natuurlijk, hij is visited geweest (voor degene die hem nog neit snappen)

Zou

Cascading Stylesheet:

.menu, a.menu

Ook werken?

[ Voor 23% gewijzigd door Roeligan op 20-10-2004 14:06 ]

[T-MOB]

Roeligan schreef op 20 oktober 2004 @ 14:03:
Idd thx RM-RF

Logisch natuurlijk, hij is visited geweest (voor degene die hem nog neit snappen)

Zou

Cascading Stylesheet:

.menu, a.menu

Ook werken?

Als je dat "cascadent" bedoelt moet je de komma er tussen uit halen...

code:

.menu .menu

heeft betrekking op een tag met de klasse menu die binnen een andere tag met de klasse menu is genest.

code:

.menu, .menu

roept twee maal hetzelfde aan. (vandaar de mierenneukmodus op rm-rf). In jouw geval zou:

code:

.menu a.menu

ook werken ja...

[Roeligan]

Ok thx voor de reaties

[Verwijderd]

Wel een beetje raar om je <table> een class "menu" te geven en de link erin ook. Ze zijn niet van dezelfde klasse omdat de link in het menu zit, en dus niet een menu is, toch?

Je zou ook gewoon de <table> een class "menu" kunnen geven en dan de volgende CSS gebruiken:

Cascading Stylesheet:

.menu a { }
.menu a:link { }
.menu a:visited { }

Lees ook eens:
http://www.w3.org/QA/Tips/goodclassnames

[ Voor 14% gewijzigd door Verwijderd op 20-10-2004 14:38 ]

[Roeligan]

Nee... klopt ik had de tabel de class gegeven zodat de link die class over zou nemen.. hij is nu dus uit die tabel

[PhysicsRules]

Misschien een beetje offtopic, maar wat stelt die constuctie voor?

code:

href="#self#circuit.action"

Nog nooit zo gezien.

[Roeligan]

Is coldfusion icm fusebox 3.
Deze methodiek gaat ervanuit dat je ALTIJD door de index heen gaat (index.cfm), de variabele self is de string 'index.cfm?fuseaction=' die moet je nogal vaak typen, dus vandaar deze afkorting.

[PhysicsRules]

Roeligan schreef op 20 oktober 2004 @ 16:53:
Is coldfusion icm fusebox 3.
Deze methodiek gaat ervanuit dat je ALTIJD door de index heen gaat (index.cfm), de variabele self is de string 'index.cfm?fuseaction=' die moet je nogal vaak typen, dus vandaar deze afkorting.

Woei, weer iets geleerd!