[[CSS]] - a:pseudo-classes en IE

[Verwijderd]

Ik onderhoud al een tijd de website voor het bedrijf waar ik mijn bijbaantje heb en ik probeer nog weleens wat uit om het wat beter eruit te laten zien. Nu wil ik graag de opmaak van de website (qua letterkleur, links etc) in een CSS-bestand zetten. So far, so good. Alles schijnt te werken, met Firefox althans. Want de opmaak van de links het menu (link/visited/hover/active) blijven met Internet Explorer op standaard (blauw en paars) staan. Het ligt niet aan mijn instellingen want bij andere sites geeft IE ze wel weer. Ik heb W3C.org al geraadpleegd evenals W3Schools, maar ik kom er niet uit. Ik heb me bij de opbouw van het bestand gehouden aan de standaarden van W3C.

Relevante bestanden:
www.vanderavoirdbv.nl/menu.html
www.vanderavoirdbv.nl/menu.css

Bij voorbaat dank voor uw reacties.

[VetCool]

Als je deze eens weghaald: background-color:transparent. Werkt het dan goed in IE ?

Ik heb mijn link gewoon zo: a:link {color:#FFFFCC;} en dit werkt in IE en de rest ook.

[ Voor 37% gewijzigd door VetCool op 11-01-2005 18:45 ]

[Verwijderd]

Ik heb dat deel van de tag verwijderd, maar helaas, het schijnt niet te werken. In ieder geval bedankt, voor je hulp. Is de puntkomma aan het eind van de tag verplicht of optioneel?

[Dark Blue]

Verwijderd schreef op dinsdag 11 januari 2005 @ 19:36:
Ik heb dat deel van de tag verwijderd, maar helaas, het schijnt niet te werken. In ieder geval bedankt, voor je hulp. Is de puntkomma aan het eind van de tag verplicht of optioneel?

In CSS; ik zal niet zeggen verplicht, maar noodzakelijk, ik heb namelijk al meerdere keren gehad dat de code die na de tag zonder puntkomma stond, niet uitgevoerd werd.

(dat is als, midden in je blokje css dus één puntkomma vergeten en merken dat je halve css niet wordt toegepast...jaaa ga dan maar zoeken!)

[Verwijderd]

puntkomma is een scheidingsteken voor verschillende definities, na de laatste hoeft er dus niet per se 1 (voor de } ), voor de rest wel

verder is het je img die een border heeft, dus:

Cascading Stylesheet:

a:hover img {
 border-color: red;
}

[ Voor 4% gewijzigd door Verwijderd op 11-01-2005 19:52 ]

[Tommetje]

Cascading Stylesheet:

img {
   border: 0;
}

[ Voor 3% gewijzigd door Tommetje op 11-01-2005 19:51 . Reden: Hoi mophor...;) ]

[CrashOne]

Ik zou je menu in een list gooien, zoiets:

code:

<style type="text/css">
body{
background: #000;
}
ul{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
a{
display: block;
font-weight: bold;
font-family: arial;
color: #f00;
text-decoration: none;
background: url(http://www.vanderavoirdbv.nl/algemeen/tulpwit.jpg) no-repeat;
text-indent: 27px;
height: 37px;
}
a:hover{
background: url(http://www.vanderavoirdbv.nl/algemeen/tulpwit2.jpg) no-repeat;
}
</style>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>

Ten eerste is je link dan wat vriendelijker, ten tweede een stuk toegankelijker.

http://www.vanderavoirdbv.nl/algemeen/tulpwit2.jpg is dan natuurlijk een tweede plaatje.

[Verwijderd]

Ik dank u allen hartelijk voor uw medewerking,
Ik heb wel het gevoel dat niet iedereen had begrepen wat mijn bedoeling was, maar dat is dan voornamelijk mijn eigen fout dan geweest. Ik wilde de kleur van de border van de img laten meekleuren bij het hoveren. En gezien al uw adviezen (het weghalen van de border en het veranderen van de img bij het hoveren) had niet iedereen dat meegekregen. Nogmaals mijn excuses.

Ik heb de situatie (door het gebruik van border-color) nu ten dele opgelost. Het grootste deel van de a:pseudo-classes (link, visited en active) werkt nu. Maar a:hover schijnt nog steeds niet te werken. Het ziet er nu wel een stuk respectabeler uit. Ik heb nu ook overal een puntkomma achtergezet.
Nogmaals iedereen bedankt, vooral mophor. Maar als iemand nog een oplossing heeft voor de hover, neem ik dat met plezier aan.

[NLChris]

Misschien moet je de volgorde van de pseudo-classes aanpassen.
Zie http://www.w3schools.com/css/css_pseudo_classes.asp:

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Dit is het enige wat ik kan bedenken, niet gigantisch veel verstand van

[Verwijderd]

Ik heb het werkend gekregen door de volgende code te gebruiken:

Cascading Stylesheet:

a:link img {border-color: #FFFFCC;}
a:visited img {border-color: #FFFFCC;}
a:hover img {border-color: #FFFF00;}
a:active img {border-color: #FFFF00;}

a:link {color: #FFFFCC;}
a:visited {color: #FFFFCC;}
a:hover {color: #FFFF00;}
a:active {color: #FFFF00;}

Ook Internet Explorer hovert nu netjes. Ik dank jullie allen en ik heb GoT in het algemeen een vermelding in mijn updatelog gegeven.