Adaptation au contenu différentes sous IE et sous firefox

Yop tout le monde,
voila j'ai probleme. En fait j'ai un tableau contenant un formulaire. Dans ce formulaire je permet a l'utilisateur de choisir des images par defaut pour des news.

J'ai un probleme c'est que sous firefox il adapte bien la largeur de la colone de mon tableau (en gros ttes les 3 images, ca revient a la ligne et ca affiche 3 image et va a la ligne, etc...). Et donc ca marche niquel. Par contre sur IE, il n'adapte pas la largeur de ma colone et va directement a la ligne apres chaque image. Ca vient du fait que j'attribue une largeur de 200px. Mais bon j'aimerai bien trouver une feinte pour que ca s'affiche correctement dans les 2

C'est un peu comme dans cette exemple http://cerig.efpg.inpg.fr/dossier/feuilles-de-style/page05.htm
(au paragraphe "Adaptation du contenu à la largeur de la boîte")

Je vous met mon code ca sera surement plus clair:

<form name="news_form" method="post" action="index.php?p=_internal_news">
<table class="form">
<tr class="form">
<td class="form">Title: </td>
<td class="form">
<input class="form"  type="text" name="news_title" size="50">
</td></tr>
<tr class="form">
<td class="form">Description: </td>

<td class="form"><textarea class="form" rows="2" cols="45" name="news_description">
</textarea></td>
</tr>
<tr class="form">
<td class="form">Content: </td>
<td class="form"><textarea class="form" rows="12" cols="45" name="news_content">
</textarea></td>
</tr>
<tr class="form">
<td class="form">Picture: </td>
<td class="form"><img src="_files_/pict_medal.png" alt="Medal" align="middle" ><input type="radio" name="picture" value="img/pict_medal.png">
<img src="_files_/pict_pound.png" alt="Money" align="middle"> <input type="radio" name="picture" value="img/pict_pound.png">
<img src="_files_/pict_glob.png" alt="World" align="middle"> <input type="radio" name="picture" value="img/pict_glob.png">
<img src="_files_/pict_megaphone.png" alt="Annoucement" align="middle"> <input type="radio" name="picture" value="img/pict_megaphone.png">
<img src="_files_/pict_fruit.png" alt="Healthy Food" align="middle"> <input type="radio" name="picture" value="img/pict_fruit.png">
<img src="_files_/pict_book.png" alt="Book" align="middle"> <input type="radio" name="picture" value="img/pict_book.png"></td>
</tr>
<tr class="form">
<td />

<td class="form"><input class="submit" type="submit" value="Submit"></td>
</tr>
</table>
</form>

et le css:

table.form
{
	border:0; 
}

tr.form
{
	height:25px;
}


td.form
{
	width:200px;
}


input.form
{ 
	background-color:#dea;
	border: 1px solid #ab4 ;
}

select.form
{ 
	background-color:#dea;
	border: 1px solid #ab4 ;
}

textarea.form
{ 
	background-color:#dea;
	border: 1px solid #ab4;
}

Voila je sais pas si quelqu'un a une feinte pour ca ?
Merci d'avance pour votre aide

Bonjour,

il y aurait bien une solution mais... sans tableau
(d'ailleurs, son usage est-il justifié dans ton cas ? tu peux voir l'Utilisation des formulaires et Les problèmes de la mise en page par tableaux)

Sinon, en conservant ta structure, si tu définis une largeur fixe pour ta cellule, elle sera fixe...
Peut etre peux-tu enlever cette largeur, et grouper chaque bloc image-bouton dans un bloc que tu placeras en float:left ?
Modifié par yyoupla (25 Nov 2005 - 14:09)

Non il n'était pas du tout justifié... Mais c'est dur de perdre les mauvaises habitudes

J'ai fait une mise en page toute simple avec les fieldset ca passe bien

Merci beaucoup pour le coup de pouce !