Problème de largeur de cellule avec balise <td>

Je suis confronté à un problème simple d'affectation de largeur à des cellules <td>. Comme souvent, ça fonctionne dans un navigateur mais pas un autre. Dans mon cas, c'est avec IE que le problème se pose. Il s'agit d'un tableau basique :

<table border="1" cellspacing="3" cellpadding="0">

Le tableau n'a pas de largeur déterminée volontairement afin de s'adapter dynamiquement au contenu. Ensuite viennent plusieurs rangées dont les cellules sont fusionnées pour certaines :

<tr>
<td colspan="2"><span class="orange8bold">Rubrique&nbsp;</span></td>
</tr>
<tr>
<td width="16"><img src="aide.gif" width="16" height="16" border="0"></td>
<td class="orangebackline"><span class="orange8bold" id="email">E-mail&nbsp;</span></td>
</tr>

Sous Firefox, la cellule de 16 pixels contenant l'image a une largeur normalement définie. Sous IE, cette cellule est bien plus large, comme si sa taille n'était pas définie. Plusieurs adaptations ont été effectuées en CSS, mais en vain.

Effectivement avec des colspan et rowspan, la largeur des cellules est toujours un peu aléatoire Je crois (je dis ça sans tester) qu'il faut que toutes les cellule de cette même colonne aient également un width="16"

Ceci dit dans l'exemple que tu montre, tu n'as pas besoin d'isoler le picto du titre adjacent chacun dans une cellule, pourquoi ne pas les réunir dans une seule et même cellule ?

Et encore mieux, pourquoi utiliser un tableau pour une mise en page aussi simple ? remplacer chaque ligne de tableau par un paragraphe (par exemple) sera plus élégant et plus souple.

A vrai dire, je n'ai jamais rencontré de problème particulier avec les colspan et rowspan. Ce tableau est d'une grande simplicité ! Concernant le picto, il a été isolé volontairement car la cellule adjacente contient une image de fond, laquelle ne doit pas apparaître sous le picto.

Il est vrai qu'un tableau n'est pas nécessaire pour présenter ce type de formulaire, mais ça apporte plus de précision que de simples paragraphes. L'interlignage de chaque élément est défini en pixels par l'espacement des cellules sans avoir à recourir au CSS.

Concernant la définition d'une taille de 16 pixels pour toutes les cellules de la colonne, cela ne change rien. C'est la première cellule définie qui adapte les suivantes.

Enfin, si je ne trouve pas d'issue, je réunirai le picto et le texte dans la même cellule, tant pis pour l'image de fond !

Juste une idée comme ça, si le fond de ton picto est opaque (blanc) l'image de fond de la cellule n'apparaitra pas en arrière plan de l'image. sans modifier l'image tu peux appliquer un fond blanc en css comme ceci :

img.picto{
background:#FFFFFF;
}

a écrit :

mais ça apporte plus de précision que de simples paragraphes.

pas franchement d'accord, la preuve...

Hello,

Puisqu'il s'agit d'un problème de mise en forme et non de langage ou structure XHTML, je déplace dans le salon... "mise en forme"

En tout cas, merci pour les astuces. Le problème a été résolu en jouant sur le fond du texte suivant le picto. Le résultat fonctionne donc bien sous IE et Firefox.