Le background d'un <tr> s'applique aux <td> sur IE6

[nicolas2603]

Bonjour, je rencontre une difficulté à mater IE6 sur une répétition de background. Je m'explique : j'ai un tableau contenant 1 ligne et 4 colonne. Je souhaite appliquer sur la ligne un background correspondant à une image de couleur qui se dégrade vers le blanc en x. Ne connaissant à l'avance la hauteur de ma ligne, mon image mesure 150x1px, que je répète en y.

Je m'y prends comme ceci :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.loisir { background: url('back_loisir.jpg') repeat-y; }
</style>
 
<table>
<tr class="loisir">
   <td width="10%">Colonne 1</td>
   <td width="40%">Colonne 2</td>
   <td width="25%">Colonne 3</td>
   <td>Colonne 4</td>
</tr>
</table>

Sauf que, si l'affichage est correct sur Firefox, sur IE6 l'application de la classe semble se faire sur chaque td, puisque mon image est répétée dans chaque colonne!

Y a t-il une astuce, une solution pour éviter ceci ? Merci d'avance.

[Vil'Coyote]

nop pas d'astuce c'est juste que normalement, on applique les élément de fond sur une colonne et non une ligne complète.

[nicolas2603]

Hum, je craignais une réponse de ce style ! Tant pis, merci.

[Candygirl]

Hello,

En principe, ajouter un position:relative sur le tr ainsi qu'un background-image:none sur le td devrait résoudre ton problème:

Code :

1
2
3
4
5
6
7
.loisir {
    background: url('back_loisir.jpg') repeat-y;
    position:relative;
}
.loisir td{
    background-image:none;
}

Si cela ne t'es pas possible tu peux essayer d'ajouter ceci à l'attention des IE concernés:

Code :

1
2
 
td { background-position:expression(-this.offsetLeft); }