[CSS] andere stijl a:link op een img

[apNia]

Ik heb op het moment m'n links zo geregeld onder deze style

code:

a:link {
    text-decoration: none;
    color: #e40000;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-style: dotted;
}

a:visited {
    text-decoration: none;
    color: #e40000;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-style: dotted;
}

a:active {
    text-decoration: none;
    color: #e40000;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-style: dotted;
}

a:hover {
    text-decoration: none;
    color: #e40000;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-style: solid;
}

Hiermee kan ik dus dotted links maken. Het probleem is nu echter dat dit mijn border="0" op images override en door die border-bottom-width: 1px; er overal een line onder komt. Nou wil ik deze tags maar dan met border-bottom-width: 0px; voor alle images die gelinked zijn. Hoe moet dat in mijn CSS geschreven worden dat bijvoorbeeld een andere a:link style effect heeft op de img tags?

edit: deze link gevonden: http://ask.metafilter.com/mefi/27347
Alles hierbinnen mocht niet baten helaas..

[ Voor 8% gewijzigd door apNia op 02-04-2006 17:58 . Reden: Link toegevoegd ]

[JHS]

Je moet ervoor zorgen dat de selector voor je link + image specifieker is: img a voldoet al, dat levert 0,2,0 op, terwijl element:state 0,1,0 is . Zie ook http://www.stuffandnonsen...css_specificity_wars.html en vooral http://www.stuffandnonsen.../specificitywars-05v2.jpg .

edit:

Hm, dat gaat niet werken natuurlijk, aangezien het a element zelf alsog een border gaat krijgen.

[ Voor 15% gewijzigd door JHS op 02-04-2006 18:10 ]

[Nick|IA]

Helaas is dat niet te doen. De border wordt op deze manier op de A gezet, niet op het element dat er in staat. Alles wat je er in zet (zowel een image als een tekstlink) krijgt dus een border. Alleen op te lossen met behulp van een aparte class (bijvoorbeeld <a class="image">) of het apart definiëren van alle gevallen waarin je er géén border bij wilt hebben.

Mag ik je vragen waarom je je CSS niet iets compacter inricht? Dit zou hetzelfde resultaat moeten geven:

Cascading Stylesheet:

a {
    color: #e40000;
    text-decoration: none;
    border-bottom: 1px #e40000 dotted;
}

a:hover {
    border-style: solid;
}

Evt. kun je met onderstaande style nog een aparte kleur geven aan visited links (aangeraden):

Cascading Stylesheet:

a:visited {
    color: #XXXXXX
}