CSS roll-over probleem

Ik wil dus een menu maken met afbeeldingen. Dat is aan de hand van een list gemaakt.

Maar er zit ook een roll-over functie op, maar die werkt niet .
Wat doe ik mis ?

[code:1:0daffbd8f3]
/* Navigatie /
#linkList {
position: relative; /
Needed for Safari */
background: #000;
padding: 20px 0 0 20px;
width: 100px;
margin: 0;
}
#linkList ol {
list-style:none;
margin: 0;
padding: 0;
}

#linkList ol li {
margin: 0;
padding: 2px 0 0 0px;
}

/* Navigatie roll-overs */
a img {height: 10px; width: 85px; border-width: 0; border:0;}

a#nieuws img {background: url(…/i/nieuws.gif) no-repeat;}
a#portfolio img {background: url(…/i/portfolio.gif) no-repeat;}
a#contact img {background: url(…/i/contact.gif) no-repeat;}

a#nieuws:hover img {background: url(…/i/nieuws_over.gif) no-repeat;}
a#portfolio:hover img {background: url(…/i/portfolio_over.gif) no-repeat;}
a#contact:hover img {background: url(…/i/cotact_over.gif) no-repeat;}

a#visited:nieuws img {background: url(…/i/nieuws.gif) no-repeat;}
a#visited:portfolio img {background: url(…/i/portfolio.gif) no-repeat;}
a#visited:contact img {background: url(…/i/contact.gif) no-repeat;}
[/code:1:0daffbd8f3]

[code:1:0daffbd8f3]
<!— Start Menu —>
<div id="linkList">
<ol>
<li> <a href="#" id="nieuws"> <img src="i/nieuws.gif" border="0"> </a> </li>
<li> <a href="#" id="portfolio"> <img src="i/portfolio.gif" border="0"> </a> </li>
<li> <a href="#" id="contact"> <img src="i/contact.gif" border="0"> </a> </li>
<li></li>
</ol>
</div>
<!— Einde Menu —>
[/code:1:0daffbd8f3]

[quote:bf3a323d2a="konijn"][code:1:bf3a323d2a]a img {height: 10px; width: 85px; border-width: 0; border:0;}

a#nieuws img {background: url(…/i/nieuws.gif) no-repeat;}
a#portfolio img {background: url(…/i/portfolio.gif) no-repeat;}
a#contact img {background: url(…/i/contact.gif) no-repeat;}

a#nieuws:hover img {background: url(…/i/nieuws_over.gif) no-repeat;}
a#portfolio:hover img {background: url(…/i/portfolio_over.gif) no-repeat;}
a#contact:hover img {background: url(…/i/cotact_over.gif) no-repeat;}

a#visited:nieuws img {background: url(…/i/nieuws.gif) no-repeat;}
a#visited:portfolio img {background: url(…/i/portfolio.gif) no-repeat;}
a#visited:contact img {background: url(…/i/contact.gif) no-repeat;}
[/code:1:bf3a323d2a][/quote:bf3a323d2a]

Dit stuk klopt niet helemaal. Je gebruikt onder andere de CSS selectors verkeerd:

[code:1:bf3a323d2a]a#visited nieuws img[/code:1:bf3a323d2a]

Zou dit moeten zijn:

[code:1:bf3a323d2a]#nieuws a:visited[/code:1:bf3a323d2a]

De <img> tags zijn niet nodig, je kan gewoon een <a> een background geven.

Hier staat een perfect voorbeeld inclusief uitleg en code van wat je volgens mij probeert te maken:

http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

Zoals Mirg al aangeeft in zijn laatste bericht is het ook erg makkelijk om de roll-over afbeeldingen in dezelfde afbeelding als de gewone te zetten zodat je geen preload nodig hebt... Die keuze is natuurljk aan jezelf.

Ik heb iets gemaakt, je moet maar eens zien in de broncode. http://www.freshface.be/beta/

De roll-overs werken in safari maar niet op PéCé (IE6) .
De email roll-over gans vanonderen werkt dan wel ?!