Hover - compatibilità con IE

[Bamboocha_team]

Domanda:sto compilando il mio primo css, eccone una porzione

td.sez{widht:130px;
height:auto;
max-height:20px;
margin:0px;
border-width:0px;
padding:2px 0px;
color:#FFFFFF;
font-size:10px;
font-variant:small-caps;
text-align:center;}

td.sez:hover{background-color:#99ff00;
color:#000000;
font-weight:900;}

questa classe di td dovrebbe essere assegnata ai link della barra dei menu, al pasaggio del mouse il td dovrebbe diventare di sfondo verde e col testo nero grasetto,

ora, con firefox l'unico cambiamento che non viene effettuato è tra testo normale e grasetto, mentre con IE non accade proprio nulla, ci passo sopra col mouse e non succede niente...eppure ho visto svariati siti, in cui anche con IE si ha l'effetto hove
Cosa devo fare?

[Gunn]

su ie le pseudoclassi funzionano solo sui link, quindi per i td...

<style type="text/css">
td.sez
{
background-color:white;
color:darkgreen;
font-weight:normal;
}

td.sez:hover, td.iehover
{
background-color:darkgreen;
color:white;
font-weight:bold;
cursorointer; /* sconsigliato per accessibilità... sembra che ci sia un link ma non è così */
}
</style>

<table style="border:1px black dotted;border-spacing:5px;">
<tr>
<td class="sez" onmouseover="this.className='iehover';" onmouseout="this.className='sez';">prova prova prova</td>
<td class="sez" onmouseover="this.className='iehover';" onmouseout="this.className='sez';">prova prova prova</td>
<td class="sez" onmouseover="this.className='iehover';" onmouseout="this.className='sez';">prova prova prova</td>
<td class="sez" onmouseover="this.className='iehover';" onmouseout="this.className='sez';">prova prova prova</td>
</tr>

<tr>
<td class="sez" onmouseover="this.className='iehover';" onmouseout="this.className='sez';">prova prova prova</td>
<td class="sez" onmouseover="this.className='iehover';" onmouseout="this.className='sez';">prova prova prova</td>
<td class="sez" onmouseover="this.className='iehover';" onmouseout="this.className='sez';">prova prova prova</td>
<td class="sez" onmouseover="this.className='iehover';" onmouseout="this.className='sez';">prova prova prova</td>
</tr>
</table>

[Bamboocha_team]

Grazie

però avrei bisogno di alcuni chiarimenti a riguardo

1) tu hai dimostrato il procedimento mettendo il CSS all'interno del tag style...
copiando la cosa all'interno di un foglio di stile esterno si ottiene lo stesso risultato giusto?

2) Ipotizziamo ora che all'interno dei <td> io ci voglia mettere un testo che funga da link

<td class="sez" onmouseover="this.className='iehover';" onmouseout="this.className='sez';">Capitolo_1</td>

questo comporterebbe qualche cambiamento? dovrei aggiungere/modificare qualcosa per mantenere lo stesso effetto visivo?

[sslazio 1900]

Per non far cambiare nulla devi definire lo stile del tag a... vale a dire che lo stile tipo il grassetto e il resto del testo lo dai al classico a:link (o a, come preferisci).
Se non definisci lo stile di a hai il solito testo blu, sottolineato.

Inserento nel tuo Stylesheet il contenuto del tag <style> non cambia nulla.