[resolu] largeur d'une colonne qui contient une image !

Bonjour à tous,

j'ai un petit problème de mise en page, que je ne rencontre que sur IE et pas sur Firefox, et je viens demander l'avis des pros :

Dans un tableau à deux colonnes dont les tailles sont fixées en pixels, si je mets une image plus grande que la colonne, en fixant la dimension de cette image avec un width="100%" (taille en pourcentages), voici le comportement :

- Sous FF : l'image est redimensionnée à la taille qu'on a défini pour la colonne, pas de problème
- Sous IE : l'image est redimiensionnée à la taille qu'on a défini pour la colonne, MAIS la colonne quand à elle explose et prends la taille d'origine en pixels de l'image.

Voici le code source typique de ce problème, avec par exemple une image dont la taille réelle fait 800 pixels de large :

<table width="600px" border="1">
<tr>
	<td width="300px">	
	<img src="img/image800px" alt="" width="100%">	
	</td>
	
	<td width="300px">lorem ipsum</td>
</tr>
</table>

Sous IE donc, l'image fait bien 300px de large, mais la colonne elle est explosée et fait 800px de large

J'ai essayé de mettre en oeuvre plusieurs solutions sans succès, la seule chose permettant de résoudre le problème est de fixer la taille de l'image en pixel, ou d'encadrer l'image par une div ayant une largeur fixée en pixels. Mais c'est hors de question, car le code du tableau est généré par un outil de portail et je ne dispose pas de l'info de la largeur ensuite (elle peut être variable selon les pages).

Si quelqu'un a une idée, une solution, ou même peut me dire si ce problème est connu ?

Merci d'avance !

Modifié par philipPF28 (08 Jan 2009 - 16:00)

Effectivement, c'est assez amusant ce petit phénomène. Et effectivement je corrobore ton hypothèse en ajoutant qu'avec une plus petite image qui s'agrandit le problème ne se pose pas, alors que si l'image est trop grande et qu'elle se réduit, le problème est bien présent

Désolé pour ce manque de solution évident

Bon courage

fetnat a écrit :
Effectivement, c'est assez amusant ce petit phénomène. Et effectivement je corrobore ton hypothèse en ajoutant qu'avec une plus petite image qui s'agrandit le problème ne se pose pas, alors que si l'image est trop grande et qu'elle se réduit, le problème est bien présent

Désolé pour ce manque de solution évident

Bon courage

Merci, ca me rassure de voir que je ne suis pas le seul à constater ce petit désagrément qui ruine la mise en page de ma page

Je n'ai toujours pas trouvé de solution passe-partout, la marge de manoeuvre sur le problème semblant assez limitée. J'ai finalement trouvé comment modifier la grille générée par mon outil de portail, le problème peut donc être résolu en ajoutant, dans la cellule, une div ayant "impérativement" :

- La largeur fixée en pixels
- La propriété overflow:hidden

<table width="600px" border="1">
<tr>
	<td width="300px">
<div style="display: block; width: 300px; overflow: hidden;">	
	<img src="img/image800px" alt="" width="100%">	
</div>
	</td>
	<td width="300px">lorem ipsum</td>
</tr>
</table>

Idéalement, on placera la propriété overflow:hidden dans une classe, pour ne l'appliquer que pour IE via un CSS Spécifique... En effet le overflow:hidden est quand même assez génant sur FF, car si on a par exemple un menu déroulant avec des Zindex, il sera tronqué. Alors que sous IE, le overflow:hidden ne les tronque pas (encore un comportement bizare, mais pour une fois que ca aide ... )

Bonjour,

En passant, le code HTML est faux. L'attribut width en HTML prend comme valeur:
- des pixels, mais sans indiquer l'unité;
- des pourcentages avec un symbole %.

Ensuite, pour le fond du problème, il est parfaitement logique qu'une cellule de tableau s'élargissent pour englober son contenu, du moins si le tableau est en table-layout: auto (par défaut). Si on souhaite un comportement plus rigide, le table-layout: fixed peut être approprié. Pas sûr que ça suffise à IE6, par contre.

Florent V. a écrit :
Bonjour,

En passant, le code HTML est faux. L'attribut width en HTML prend comme valeur:
- des pixels, mais sans indiquer l'unité;
- des pourcentages avec un symbole %.

Ensuite, pour le fond du problème, il est parfaitement logique qu'une cellule de tableau s'élargissent pour englober son contenu, du moins si le tableau est en table-layout: auto (par défaut). Si on souhaite un comportement plus rigide, le table-layout: fixed peut être approprié. Pas sûr que ça suffise à IE6, par contre.

En effet, j'ai mixé le CSS et les propriétés de tableau pour les "px", autant pour moi

Sinon merci pour la propriété table-layout: fixed, elle résout le problème en forçant à prendre en compte la largeur définie par width, et non par le contenu :

http://www.w3schools.com/Css/pr_tab_table-layout.asp

ps : Concernant l'aspect logique, on est ok, normal qu'une cellule s'élargisse pour englober son contenu, mais en l'occurrence le contenu est redimensionné pour s'adapter à la taille de la cellule (width 100%). Si l'image n'était pas resizée, le comportement ne me choquerais pas, mais là IE se base sur la taille réelle de l'image pour calculer la taille de la cellule, alors que l'image est affichée en petit. C'est surement une question d'ordre de calcul par rapport à FF.

Dans tous les cas merci, je vais surement opter pour cette solution plutôt que pour celle de mon post précédent !