[XHTML 1.0] <td> avec height et background (IE

2 pièce(s) jointe(s)

<td> avec height et background (IE - Firefox)

Bonjour à tous
j'ai un petit problème entre ie7 (ne fonctionne pas) et firefox (fonctionne)
j'ai posté deux images pour vous montrer mon soucis
et voici mon code

Code:

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
	<tr>
		<td style="background:url('img/haut_mini_g.jpg') no-repeat bottom right;"></td>
		<td style="height:106px;background:url('img/banniere_c.png') repeat-x top;">
			<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td style="width:447px;height:106px;">&nbsp;</td>
				<td style="height:106px;">&nbsp;</td>
				<td style="width:475px;height:106px;">&nbsp;</td>
			</tr>
			</table>
		</td>
		<td style="background:url('img/haut_mini_d.jpg') no-repeat bottom left;"></td>
	</tr>
	<tr>
		<td style="width:27px;height:50%;">
			<table border="0" cellspacing="0" cellpadding="0" style="height:100%;width:100%;">
			<tr>
				<td style="background:url('img/haut_g.jpg') no-repeat right;height:36px;">&nbsp;</td>
			</tr>
			<tr>
				<td style="background:url('img/centre_g.jpg') repeat-y right;">&nbsp;</td>
			</tr>
			</table>
		</td>
		<td rowspan="2">
			<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td colspan="3" style="background:url('img/haut_c.jpg') repeat-x;height:36px;"></td>
			</tr>
			<tr>
				<td style="width:289px;background:#ffffff;">
				<?php
				if (isset($_SESSION["messageErreur"]) && $_SESSION["messageErreur"] != '')
				{
					echo '<center><font style="color:#573102;font-weight:bold;">'.$_SESSION["messageErreur"].'</font></center>';
					unset($_SESSION["messageErreur"]);
				}
				include('_inc/menu_g.php');
				?>
				</td>
				<td style="width:100%;padding:15px 15px 15px 15px;background:url(img/visuel.jpg) no-repeat top right #ffffff;min-height:355px;" id="centre">
					<?php echo $ewp->flush(); ?>
				</td>
				<td style="background:#ffffff;">
					<?php include('_inc/menu_d.php'); ?>
				</td>
			</tr>
			<tr>
				<td colspan="3" style="background:url('img/bas_c.jpg') repeat-x top; height:58px;">
					<div id="bas"></div>
				</td>
			</tr>
			</table>
		</td>
		<td style="width:27px;height:50%;">
			<table border="0" cellspacing="0" cellpadding="0" style="height:100%;width:100%;">
			<tr>
				<td style="background:url('img/haut_d.jpg') no-repeat left top;height:36px;">&nbsp;</td>
			</tr>
			<tr>
				<td style="background:url('img/centre_d.jpg') repeat-y left;height:100%;">&nbsp;</td>
			</tr>
			</table>
		</td>
	</tr>
	
	<tr>
		<td style="width:27px; height:50%;">
			<table border="0" cellspacing="0" cellpadding="0" style="height:100%;width:100%;">
			<tr>
				<td style="background:url('img/centre_g.jpg') repeat-y right;">&nbsp;</td>
			</tr>
			<tr>
				<td style="background:url('img/bas_g.jpg') no-repeat top right;height:58px;">&nbsp;</td>
			</tr>
			</table>
		</td>
		<td style="width:27px; height:50%;">
			<table border="0" cellspacing="0" cellpadding="0" style="height:100%;width:100%;">
			<tr>
				<td style="background:url('img/centre_d.jpg') repeat-y left;">&nbsp;</td>
			</tr>
			<tr>
				<td style="background:url('img/bas_d.jpg') no-repeat;height:58px;">&nbsp;</td>
			</tr>
			</table>
		</td>
	</tr>
	</table>

je vous ai mis en rouge la partie qui bloque
en fait l'image en background ne descend pas jusqu'où elle devrait dans IE7 (je n'ai pas testé le 6)
j'ai testé un peu toutes les solutions de height (px, %, etc)
mais rien à faire

merci de votre aide

Salut,
Voilà encore une bonne raison pour abandonner l'utilisation de tableaux pour faire de la mise en page.
Je te conseillerais plutôt d'utiliser une structure sémantique adaptée à ta page associée à une feuille de style. De cette manière tu allègeras ton code et le rendra plus facilement utilisable sur les différents navigateurs.

pour la structure principale, notre choix (avec mes collègues) s'est porté sur les tableaux, car nous voulons design qui s'adapte à la largeur de la page du client.
Pour la largeur donc pas de soucis mais c'est la hauteur qui est mal gérée par IE7 le background

Citation:

Envoyé par mdr_cedrick

pour la structure principale, notre choix (avec mes collègues) s'est porté sur les tableaux, car nous voulons design qui s'adapte à la largeur de la page du client.

Bonjour, l'utilisation du couple DIV/CSS le permet aussi et plus simplement que les tableaux qui eux, s'adaptent à leur contenus et non à la largeur de la zone d'affichage. ;)
Si tu souhaites quand même conserver ton tableau, une page en ligne ou au pire la TOTALITÉ du code HTML (et éventuellement CSS s'il y a) serait nécessaires.

du coup j'ai opté pour une autre solution, toujours avec tableaux mais structuré différemment. J'utilise une couleur de fond unie plutôt qu'une image en background qui doit se répéter et du coup je retombe sur ce que je voulais.

Merci quand même de votre aide