[RESOLU] Problème background-image dans un TR sous IE et Opera

Bonjour à tous,

voilà j'ai placé un background-image sur mes TR de mon Table, seulement j'ai un problème sous IE et Opera. Ça fonctionne bien sous Firefox.

Le problème : au lieu de me faire un background sur mon TR, il me le fait sur mes TD.. donc j'ai deux fois mon image (puisque vous allez le voir, j'ai deux colonnes par ligne).

L'image en background pour le TR est une fois :

http://www.macsim.info/tableau/tab1_03.png ou http://www.macsim.info/tableau/tab2_05.png

Voici le résultat voulu, et qui fonctionne sous firefox :

http://img100.imageshack.us/img100/9951/capturerge5.jpg

Et voici le rendu sous IE7 ainsi que sous Opera :

http://img156.imageshack.us/img156/2958/capturerbf0.jpg

Maintenant, le petit code :

Html :

	<table style="width: 146px; border: 0;" cellspacing="0" cellpadding="0">
		<tr>
			<td colspan="2" style="background-image: url('tableau_01.png'); height: 37px;"></td>
		</tr>
		<tr class="tr_ligne_impair">
			<td class="td_premiere_colone">1</td>
			<td>texte texte</td>
		</tr>
		<tr class="tr_ligne_pair">
			<td class="td_premiere_colone">2</td>
			<td>texte texte</td>
		</tr>
		<tr class="tr_ligne_impair">
			<td class="td_premiere_colone">3</td>
			<td>texte texte</td>
		</tr>
<!-- etc etc... -->
		<tr class="tr_ligne_pair">
			<td class="td_premiere_colone">10</td>
			<td>texte texte</td>
		</tr>
		<tr>
			<td colspan="2" style="background-image: url('tableau_05.png'); height: 10px;"></td>
		</tr>
	</table>

CSS :

body {
background-color: gray;
}

td {
text-align: center;
}

.tr_ligne_impair {
	background-image: url('tab1_03.png');
	height: 19px;
}
.tr_ligne_pair {
	background-image: url('tab2_05.png');
	height: 19px;
}

.td_premiere_colone {
	width: 20px;
	padding-left: 5px;
}

J'ai mis le tableau en ligne, disponible ici même

Voilà, si quelqu'un peut m'aider à résoudre ce petit problème, ça serai cool

Bonne journée à tous.
Modifié par MacSIM (16 Feb 2008 - 13:33)

bonjour,

2 petites choses :

1) ton doctype est incomplet et fait basculer IE en mode quirk entre autres.

2) IE gère les tableaux comme une entité a part entiere , un peu comme les formulaires , qui ne suivent pas forcement les régles de mise en forme applicable aux autres balises . Ie ne peut pas gerer corectement le background sur tr , il le reporte sur les td .

Solutions:

comppléte le doctype (devrait suffire a Opera).

Positionner les fonds sur les td et ne pas tenter de stylé les tr , a prioiri conteneurs invisbles ne servant qu'a recevoir les cellules.

Ta page débuggé , je te laisse regardé les modifs css apporté (fond deplacé de tr vers td + background-position)

http://gcyrillus.free.fr/essai/testtableau.html

GC

Bonjour,

merci pour ta réponse clair et bien détaillée. C'est parfait ! En plus avec un lien avec la réponse c'est super

Ça ma permit de voir que j'oubliais un morceau du DTD.. dommage qu'en validant mes pages ça soit passé inaperçu !

Voilà, merci encore