annullare background : transparent in IE7

**Walessio** · 08-10-2010, 16:08

Ho scoperto un curioso comportamento in IE7:
se dichiaro trasparente lo sfondo di un elemento con una regola css e poi dichiaro delle regole che cambiano il colore di sfondo, queste ultime vengono ignorate.
Per capire meglio vi posto il codice html di una tabella le cui righe cambiano colore on mouseover (come dovrebbe funzionare) ma se decommentate "la riga incriminata" questo non accade più.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="author" content="Alessio"> <title>Untitled 1</title> </head> <style> /*la riga incriminata*/ /*table, tbody, tfoot, thead, th , tr, td { background:transparent; }*/ table, tbody, tfoot, thead, th , tr, td { background:none; } table tbody tr.odd, table tbody tr.even { cursor:pointer; } table tbody tr.odd { background-color:#E2E4FF; color:black; } table tbody tr.odd:hover { background-color:#2D2D2D; color:white; } table tbody tr.even { background-color:white; color:black; } table tbody tr.even:hover { background-color:black; color:white; } </style> <body> <table> <tbody> <tr class="odd"> <td>odd</td> </tr> <tr class="even"> <td>even</td> </tr> </tbody> </table> </body> </html>

E qui la domanda:
Come faccio ad annullare l'effetto di background : transparent?
Ho già provato con background:none e background:white ma non va lo stesso

**codencode** · 08-10-2010, 17:58

Il problema sta nella specificità delle regole usate.

codice:

table tbody tr.odd

e

codice:

table tbody tr.even

non sortiscono effetto perchè agiscono sulla riga e non sulla cella (che è più specifica).
Il background resta settato come in precedenza perchè il valore è assegnato anche alla cella.

**codencode** · 08-10-2010, 17:59

Prova, comunque, ad assegnare la clausola !important alle regole che vuoi prevalgano.

**Walessio** · 13-10-2010, 10:08

Ciao codencode e grazie per i suggerimenti.
Ho provato a modificare il css con la clausola important in questo modo:

codice:

table, tbody, tfoot, thead, th , tr, td { background:transparent; }

table, tbody, tfoot, thead, th , tr, td { background:white !important; }

table tbody tr.odd, table tbody tr.even { cursor:pointer; }

table tbody tr.odd { background-color:#E2E4FF !important; color:black; }

table tbody tr.odd:hover { background-color:#2D2D2D !important; color:white; } 

table tbody tr.even { background-color:white !important; color:black; } 

table tbody tr.even:hover { background-color:black !important; color:white; }

Ma così non funziona.
Googlando in giro per un pò ho poi scoperto dove sta il problema: IE non supporta nativamente il background-color per i TR e per simularli copia la proprietà dal TR ai TD.
Perciò per risettare la proprietà dopo averla impostata la prima volta, bisogna agire sui TD e non sul TR, e non serve la clausola !important.
In pratica ho risolto, aggiungendo i td nei selettori delle righe in questo modo:

codice:

table, tbody, tfoot, thead, th , tr, td { background:transparent; }

table, tbody, tfoot, thead, th , tr, td { background:white !important; }

table tbody tr.odd, table tbody tr.even { cursor:pointer; }

table tbody tr.odd td { background-color:#E2E4FF !important; color:black; }

table tbody tr.odd:hover td { background-color:#2D2D2D !important; color:white; } 

table tbody tr.even td{ background-color:white !important; color:black; } 

table tbody tr.even:hover td { background-color:black !important; color:white; }

Discussione: annullare background : transparent in IE7

Strumenti discussione

Ricerca discussione

Visualizza

annullare background : transparent in IE7

Permessi di invio