Bonjour,


Je crée en php une fonction pour générer dynamiquement un tableau. Ceci afin d'harmoniser tous les tableaux de mon site et de me permettre une maintenance uniquement sur la feuille de style ou sur cette fonction.
Le problème n'est pas vraiment là, mais c'est le background.

J'affecte une valeur fixe à mon tableau afin de pouvoir mettre une image de fond pour styliser la ligne.
J'affecte donc une classe en HTML et dans la feuille de style, l'image de fond.
Or cette image est répétée sous IE dans chaque cellule alors que sous Firefox elle prend bien toute la place de la ligne (ceci etant le but recherché). Je voulais savoir si c'etait un probleme inéluctable ou si j'ai oublié de faire quelque chose.

Voici les bout de codes correspondants :


Le HTML (je ne mets que le résultat de ma fonction).

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<table cellspacing="0" align=center>
<tr>
<th colspan="3" class="htTab">Les résultats de la journée</th>
</tr>
<tr class="RedTitle">
<th colspan="3">Ligue 1 - Journée n° 1 <img src="images/BubbleRed.png" width="20" height="20" alt="Red"/>
</th>
</tr>
<tr class="GreenTitle">
<th>Nom du buteur</th>
<th>Equipe qui ouvre le score</th>
<th>Equipe qui mène à la mi-temps</th>
</tr>
<tr class="CorpsTabB">
<td colspan="3">BORDEAUX <strong>2 - 1</strong> CAEN</td>
</tr>
<tr class="CorpsTabA">
<td>[BOR] (MIL) Gourcuff Yoann</td>
<td>BORDEAUX</td>
<td>BORDEAUX</td>
</tr>
<tr>
<th colspan="3" class="basTab">
 
</th>
</tr>
</table>
Le morceau de la feuille de style

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
.htTab {
 
background: url(images/htTab.gif) no-repeat bottom;
width: 800px;
height: 50px;
border-collapse:collapse;
}
 
.basTab {
 
background: url(images/basTab.gif) no-repeat top;
width: 800px;
height: 50px;
border-collapse:collapse;
}
 
.RedTitle {
background: url(images/RedTitle.gif) repeat-y bottom;
width: 800px;
height: 30px;
border-collapse:collapse;
}
 
.GreenTitle {
background: url(images/GreenTitle.gif) no-repeat bottom;
width: 800px;
height: 30px;
border-collapse:collapse;
}
 
.CorpsTabA {
background: url(images/CorpsTabA.gif) no-repeat bottom;
width: 800px;
height: 30px;
border-collapse:collapse;
}
 
.CorpsTabB {
background: url(images/CorpsTabB.gif) no-repeat bottom;
width: 800px;
height: 30px;
border-collapse:collapse;
}
Le résultat en image :

Sous IE :


Sous Firefox (résultat recherché) :



Je vous remercie d'avance d'avoir lu ce post et je remercie d'avance les personnes qui m'apporteront des réponses constructives.