[html] Hauteur de tableau fixe sous IE9 avec DIV

masterdim Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   -  
masterdim Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

J'ai un souci avec un tableau qui contient un <DIV> dans une cellule. Cette <DIV> contient beaucoup d'info et j'utilise un style "overflow:auto" pour que sa hauteur reste fixe. Exemple :


<table>
<tr>
<td height='100'>
<div style='width:500px;height:100px;overflow:auto;'>
Mon texte qui fait plus de 100px de hauteur...
</div>
</td>
</tr>
</table>


Cela fonctionne très bien sous Firefox et sous Safari, mais... pas sous Internet Explorer 9 ! Sous IE9, la <DIV> garde sa hauteur de 100px, mais pas la cellule qui prend la hauteur du texte contenu dans la <DIV>, ce qui crée de grand espaces vides dans la cellule...

Est-ce que qqun a une idée comment gérer ce souci ?
Je sais qu'il y a la possibilité de laisser tomber les tableaux et de ne créer que des <DIV> gérées en CSS, mais ça me prendrait trop de temps de tout reprendre et de changer de "technologie"...

Merci pour vos réponses et conseils.
A voir également:

3 réponses

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,
Je n'ai pas IE9 sous la main pour tester ....
mais il me semble qu'avec un max-height en plus..ça devrait le faire

<div style='width:500px;max-height:100px;height:100px;overflow:auto;'>

0
masterdim Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   31
 
Hello, non ça ne change rien :-(
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Et si tu change ton
overflow:auto 

par
overflow-x:scroll
?
Oui ça fait apparaitre la barre de défilement en permanence.. mais est-ce que ça corrige le problème de taille ?



Cordialement,
Jordane
0
masterdim Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   31
 
Alors j'ai essayé plutôt
overflow-y:scroll
, mais ça fait toujours la même chose...
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > masterdim Messages postés 51 Date d'inscription   Statut Membre Dernière intervention  
 
ah oui.. Y pardon.
Par contre.... tu n'as pas de CSS qui pourrait prendre le pas sur le style que tu marques en dur ?

Sinon tu peux encore essayer ça (avec du CSS) :
#tonDiv{
max-height:100px; 
height: expression(this.scrollHeight>100?"100px":"auto");  
Overflow:auto;
	}
0
masterdim Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   31
 
Snif... toujours la même chose...
0
masterdim Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   31
 
Par contre, je commence à isoler le problème : ça fait du fait que le contenu du champ <DIV> est de l'html enrichi qui est en fait une autre page web. Je continue à creuser...
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

Ou peut-être en appliquant un style sur la balise td ?
<td style='height:100px;'>
<div style='width:500px;height:100px;overflow:auto;'>
Mon texte qui fait plus de 100px de hauteur...
</div>
</td>
0
masterdim Messages postés 51 Date d'inscription   Statut Membre Dernière intervention   31
 
Hello,
Malheureusement, pas de changement...
La seule option que je vois, c'est d'utiliser un <textarea> au lieu d'un <div>. Cela résoud mes problèmes de hauteur, mais cela m'en crée d'autres : le texte qui figure dans le conteneur est de l'html enrichi provenant d'une bdd et je me retrouve à avec le code html non interprété qui s'affiche dans la <textarea>...
0