[IE] Problème avec background-image dans un TR?!

Version imprimable

Bonjour à tous,

Problème rencontré sur IE 6 et 7 (fonctionnel sous Firefox 2). Le soucis est que lorsque je souhaite appliquer un background-image à une <tr> qui contient des cellules (<th> ou <td>) sans background-image, tout va bien. Dès lors que j'applique un background-image à mon <tr> ET à mes cellules : ca ne m'affiche plus le background-image du <tr> mais seulement celui des cellules (td/th).

Quelqu'un aurait une solution à ce soucis?

Code:

1
2
3
4
5
6
7
8
.myGrid 
{
	width:565px;
	border:1px solid #99BBE8;
}
 
.HeaderColmuns { text-align:left; height:22px; background:url(images/z_grid_headerBg.png) repeat-x; }
.myGrid thead th { padding-left:3px; color:#15428B; background:url(images/z_grid_headerSep.gif) right no-repeat; }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table class="myGrid" cellpadding="0" cellspacing="0">
            <thead>
                <tr class="HeaderColmuns">
                    <th title="...">Nom Colonne</th>
                    <th title="...">Nom Colonne</th>
                    <th title="...">Nom Colonne</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </tbody>
</table>

Merci d'avance pour vos réponses qui je l'espère, m'apporteront une solution (enfin) à ce problème.

05/03/2007, 18h35
E.Bzz

Bonjour,
précise la finallité.
Ce fonctionnement semble normal : si tu veux voir un background du tr, pourquoi en mettre dans les td ?
Et quel est le résultat attendu, si tu peux mettre les 2 ?

A+
05/03/2007, 18h55
Danny Blue

C'est pour avoir ca (je te screen le résultat sur firefox).

(1) = TR (la ligne)
(2) = le petit séparateur entre chaque cellule du theader

http://img101.imageshack.us/img101/3382/screentrrp0.jpg
05/03/2007, 19h02
E.Bzz

Et en laissant juste l'image sur le tr, mais en mettant un border-style:groove ça le fait pas ?
Sur le td : à gauche ou à droite ...

A+
05/03/2007, 20h16
Danny Blue

Citation:

Envoyé par E.Bzz

Et en laissant juste l'image sur le tr, mais en mettant un border-style:groove ça le fait pas ?
Sur le td : à gauche ou à droite ...
A+

Disons que la bordure fait toute la hauteur de la cellule et c'est pas très jolie, mon background à moi avait une petite hauteur et ca rendait mieux. Donc ca serait effectivement une solution "de secours" mais j'aimerais que ce soit comme je le souhaitais si c'est toutefois possible ;-)

Merci beaucoup en tout cas E.Bzz!
06/03/2007, 08h51
E.Bzz

Citation:

Envoyé par Danny Blue

Disons que la bordure fait toute la hauteur de la cellule et c'est pas très jolie

En augmentant le padding (top+bottom), ça devrait compenser ...

A+

J'ai eu le même souci que toi Danny Blue et j'ai trouvé la solution ;)

Il te suffit de déplacer ton z_grid_headerBg.png du TR au TABLE :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .myGrid { width:565px; border:1px solid #99BBE8; background:url(images/z_grid_headerBg.png) repeat-x; } .HeaderColmuns { text-align:left; height:22px; } .myGrid thead th { padding-left:3px; color:#15428B; background:url(images/z_grid_headerSep.gif) right no-repeat; }
Et ca marche :)