Meer aandacht voor links

Je ziet het op zoveel sites, maar hoe wordt het nu juist gedaan, het effect dat als je over een lijst met links gaat en dan de gehele achtergrond van de block een :hover effect krijgt. Meestal begin je er niet aan omdat je weet dat Internet Explorer 6 geen :hover over andere elementen toelaat dan een a (link).
Voor de ongeduldigen: hier kan je reeds een voorbeeld zien, om te weten hoe het zou kunnen zal je toch de rest ook moeten lezen.

De HTML

Een eenvoudige lijst, waarbij er wel op moet gelet worden dat de <a> rond de gehele datum (<span>) en beschrijving (<em>) gaat.

<div id="links">
<ul>
<li>
<a href="#" title="Text">Link een<br />
<span>08/11/2008</span>
<em>Uitleg over de link.</em></a>
</li>
<li>
<a href="#" title="Text">Link twee<br />
<span>08/11/2008</span>
<em>Uitleg over de link.</em></a>
</li>
</ul>
</div>

De CSS

Om de CSS te laten werken in Internet Explorer 6 moet de hoogte en de breedte van de link evenredig zijn aan zijn parent element de <li>, anders zal het hover effect enkel zichtbaar zijn als je over de tekst gaat, dus niet over de gehele block.

#links {
margin-top: 40px;
}
#links ul {
list-style-type: none;
width: 400px;
}
#links li {
border: 1px solid #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
/* voor IE6 begin */
* html #links li a {
width: 400px;
}
/* voor IE6 einde */
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Arial, sans-serif;
line-height: 125%;
}
#links a span {
color: #b6b6b6;
font: normal 70% Verdana, Arial, sans-serif;
line-height: 150%;
}

Bedenkingen?

Dit is de eenvoudigste manier die ik kon bedenken, ik zou natuurlijk ook de <li> een :hover kunnen geven, maar dit zou als resultaat hebben dat er nog meer zou moeten gehackt worden voor IE6.
Of zelfs de <a> een breedte geven van 400px, maar dan speelt de gebruikte padding weer een issue, waartoe je weer verplicht bent om extra HTML te gaan gebruiken. Less is more