Discussion :

[Silent]

CSS / TBODY : bizarre


Bonjour,

J'ai un petit problème avec l'habillage CSS d'un tableau. J'ai mis des background-image à des thead, tfoot et tbody. Comme ça, je peux décorer mes tables avec des images.

Sous Firefox, ça marche très bien. Par contre sous IE, j'ai l'impression qu'il me répète l'image de tbody pour chaque colonne. A gauche Firefox, à droite IE. Voyez comme le tableau à deux colonnes répètes le background deux fois sous IE :




Les Border sont là pour vous simplifier la compréhension.

Alors attention hein, on pourrait croire comme ça que le background-image est réduit, mais je vous assure qu'en fait il est répété, écrasant dont celui de la colonne d'avant.

Voici mon code html (simplifié sur deux tableaux, un à 1 colonne, l'autre à 2 colonnes) :

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
45
46
47
48
49
50
51
52
53
54
55
<div class="menu_philautarchie">
 
<table>
 
	<thead>
		<tr><td>Titre</td></tr>
	</thead>	
	<tfoot>
		<tr><td> &#160 </td></tr>
	</tfoot>
 
	<tbody>
		<tr><td>Contenu 1</td></tr>
		<tr><td>Contenu 2</td></tr>
		<tr><td>Contenu 3</td></tr>
		<tr><td>Contenu 4</td></tr>
		<tr><td>Contenu 5</td></tr>
		<tr><td>Contenu 6</td></tr>
	</tbody>
 
</table>
 
 
 
<table>
 
	<thead>
		<tr><td colspan="2">Titre</td></tr>
	</thead>	
	<tfoot>
		<tr><td colspan="2"> &#160 </td></tr>
	</tfoot>
 
	<tbody>
		<tr>
		<td>Image 1</td>
		<td>Commentaire 1</td>
		</tr>
		<tr>
		<td>Image 2</td>
		<td>Commentaire 2</td>
		</tr>
		<tr>
		<td>Image 3</td>
		<td>Commentaire 3</td>
		</tr>
		<tr>
		<td>Image 4</td>
		<td>Commentaire 4</td>
		</tr>
	</tbody>
 
</table>
 
</div>

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.menu_philautarchie table {
 
/* Taille et bordure */
width: 180px;
border: 1px solid black;
border-collapse: collapse;
 
/* Couleurs */
background-color: transparent;
 
/* Espacement entre les tables */
margin-bottom: 10%;
}
 
 
.menu_philautarchie thead {
 
/* Image de fond */
background-image: url("./images/menu_thead.gif");
background-repeat: no-repeat;
background-position: left top;
 
/* Texte */
color: black;
line-height: 2;
text-align: center;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
}
 
.menu_philautarchie tfoot {
 
/* Image de fond */
background-image: url("./images/menu_tfoot.gif");
background-repeat: no-repeat;
background-position: left bottom;
}
 
 
.menu_philautarchie tbody {
 
/* Image de fond */
background-image: url("./images/menu_tbody.gif");
background-repeat: no-repeat;
background-position: left middle;
 
/* Texte */
line-height: normal;
font-size: 8pt;
text-decoration: none;
}
 
 
.menu_philautarchie tr {
background-color: transparent;
border: 1px solid black;
}
 
 
.menu_philautarchie td {
background-color: transparent;
border: 1px solid black;
padding-left: 10px;
padding-right: 10px;
}

Voilà, vous avez des idées ?

En tout cas, je vous remercies d'avance !

[Silent]

Personne n'a d'idées ?

[marabout]

non, je constate comme toi qu'apparemment IE ne tient pas compte de ton CSS pour TBody... Et pourtant le tag Tbody est une création de Microsoft ! Je cherche encore

[Silent]

non, je constate comme toi qu'apparemment IE ne tient pas compte de ton CSS pour TBody... Et pourtant le tag Tbody est une création de Microsoft ! Je cherche encore

Je dirai plutôt qu'il en tient bizarrement compte ! Parce que l'image s'affiche correctement pour une colonne, mais par pour deux (alors que pour FF, aucun problème).

Mais en tout cas, merci de te préoccuper de mon problème !

[Silent]

Bon...

Ça fait des heures que je cherche une solution... Ça me rend fou. Y'a plus personne pour m'aider !!!