[RESOLU] Retour à la ligne d'une cellule de tableau dans IE 8

Salut à tous !

J'ai un problème d'affichage dans IE8, une cellule de tableau passe à la ligne.

Voici le rendu dans IE :


et le comportement attendu :


Le code est valide, le bug est toujours présent quand j'enlève tous les attributs class et style de toutes les balises.

Le code généré :

<form action="" method="post">
<table class="large">
	<tr>
		<th style="width:20px;">ID</th>
		<th style="width:80px;">Image</th>
		<th>Marque</th>
		<th>Modele</th>
		<th>Couleur</th>
		<th style="width:80px;">Genre</th>
		<th style="width:100px;">Style</th>
		<th style="width:50px;">Promo</th>
		<th style="width:50px;">Port</th>
		<th style="width:60px;">Prix <img src="/images/tip.png" alt="aide" class="tips" title="Prix :: Il est possible d'utiliser les signes &lt; ou &gt; avant le nombre. Ex : &lt;50 affiche les résultats inférieurs à 50 &euro;" /></th>
		<th style="width:60px;">Solde <img src="/images/tip.png" alt="aide" class="tips" title="Prix :: Il est possible d'utiliser les signes &lt; ou &gt; avant le nombre. Ex : &lt;50 affiche les résultats inférieurs à 50 &euro;" /></th>
		<th colspan="2"></th>
	</tr>
	<tr>
		<th class="a_center" style="padding:0 0 4px;">
			<input type="text" name="f_id" value="" style="width:20px;" />
		</th>
		<th class="a_center" style="padding:0 0 4px;">--</th>
		<th class="a_center" style="padding:0 0 4px;">
			<select name="f_marque" style="width:90%;">
			<option value="0">--</option>
			<option value="14">Accessoires</option>
			<option value="1">Adidas</option>
			</select>
		</th>
		<th class="a_center" style="padding:0 0 4px;">
			<select name="f_modele" style="width:90%;">
			<option value="0">--</option>
			<option value="9">Future Cat</option>
			<option value="6">Stan Smith</option>
			</select>
		</th>
		<th class="a_center" style="padding:0 0 4px;">
			<select name="f_couleur" style="width:90%;">
			<option value="0">--</option>
			<option value="12">Beige</option>
			<option value="2">Blanc</option>
			</select>
		</th>
		<th class="a_center" style="padding:0 0 4px;">
			<select name="f_genre" style="width:70px;">
			<option value="0">--</option>
			<option value="hommes">Hommes</option>
			<option value="femmes">Femmes</option>
			</select>
		</th>
		<th class="a_center" style="padding:0 0 4px;">
			<select name="f_style" style="width:90px;">
			<option value="0">--</option>
			<option value="ville-detente">Ville Détente</option>
			<option value="tennis-ville">Tennis Ville</option>
			</select>
		</th>
		<th class="a_center" style="padding:0 0 4px;">
			<select name="f_promo" style="width:40px;">
			<option value="0">--</option>
			<option value="1">Oui</option>
			<option value="2">Non</option>
			</select>
		</th>
		<th class="a_center" style="padding:0 0 4px;">
			<select name="f_port" style="width:40px;">
			<option value="0">--</option>
			<option value="1">Oui</option>
			<option value="2">Non</option>
			</select>
		</th>
		<th class="a_center" style="padding:0 0 4px;">
			<input type="text" name="f_prix" value="" style="width:50px;" />
		</th>
		<th class="a_center" style="padding:0 0 4px;">
			<input type="text" name="f_solde" value="" style="width:50px;" />
		</th>
		<th colspan="2">
			<input type="submit" class="submit" name="filtrer" value="Filtrer" title="Filtrer" />
			<input type="submit" class="submit" name="reinitialiser" value="x" title="Réinitialiser" />
		</th>
	</tr>
	
	<!-- puis les enregistrements, j'en mets qu'un -->
	
	<tr>
		<td style="width:20px;">47</td>
		<td style="width:20px;"><img src='http://www.christ.off/images/chaussures-de-sport/47-1.jpg' alt='' style="display:block;" /></td>
		<td>Dockers</td>
		<td></td>
		<td>Marron</td>
		<td>Hommes</td>
		<td>Ville Détente</td>
		<td>Oui</td>
		<td>Non</td>
		<td>59,00</td>
		<td>--</td>
		<td class="action">
		<form action="" method="post">
			<div>
				<input type="hidden" name="mod" value="47" />
				<input class="modif" type="submit" name="modifier" value="" title="Modifier" />
			</div>
		</form>
		</td>
		<td class="action">
		<form action="" method="post">
			<div>
				<input type="hidden" name="sup" value="47" />
				<input class="supprim" type="submit" name="supprimer" value="" title="Supprimer" onclick="return confirm('Voulez-vous vraiment supprimer ce produit&nbsp;?')" />

			</div>
		</form>
		</td>
	</tr>
	
	<!-- encore plusieurs enregistrements, puis -->
	
</table>
</form>

Pourquoi ce décalage de cellule sous IE ?
Est-ce qu'un copier / coller du code fonctionne chez vous ?
(je suis en local, les images ne s'afficheront pas)

D'avance merci pour votre réponse

Christophe
Modifié par christ-off (11 Mar 2010 - 17:22)

Bon d'accord...

je viens de trouver la solution.

IE n'aime pas les formulaires imbriqués

en enlevant simplement la première balise <form> ça marche

C'est marrant d'ailleurs :
en restant valide, IE n'affiche pas correctement

ex :
<form>
<table>
<tr>
<th>
<input text/>
</th>
<th>
<input submit/>
</th>
</tr>
<tr>
<td>texte</td>
<td>
<form>
<input text/>
<input submit/>
</form>
</td>
</tr>
</table>
</form>

mais en feintant pour afficher correctement, je ne valide plus

ex :
<table>
<form>
<tr>
<th>
<input text/>
</th>
<th>
<input submit/>
</th>
</tr>
</form>
<tr>
<td>texte</td>
<td>
<form>
<input text/>
<input submit/>
</form>
</td>
</tr>
</table>

Bonjour,

J'ai souvent le même problème, je cherche une plombe un décalage avant de voir qu'il s'agit de la balise form qui pose problème.

J'aimerais ne pas devoir exploser ma validation W3C pour pouvoir éviter les décalages (en feintant un form entre un tr et un td par exemple), quelqu'un sait pourquoi la balise form (mais aussi - et plus souvent même - la balise /form) crée un espace visible sous IE ?

Merci pour votre aide, et si l'auteur repasse, peut-il enlever "Résolu"...

c'est fait

un début de piste ici
Modifié par christ-off (15 Mar 2010 - 09:26)

Héhé, même le form est à entrer en css.

En effet, ça marche.

Merci