[html] Hauteur de tableau fixe sous IE9 avec DIV

masterdim Messages postés 55 Statut Membre -  
masterdim Messages postés 55 Statut Membre -
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.

3 réponses

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    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
    1. masterdim Messages postés 55 Statut Membre 31
       
      Hello, non ça ne change rien :-(
      0
  2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    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
    1. masterdim Messages postés 55 Statut Membre 31
       
      Alors j'ai essayé plutôt 
      overflow-y:scroll
      , mais ça fait toujours la même chose...
      0
      1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832 > masterdim Messages postés 55 Statut Membre
         
        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
    2. masterdim Messages postés 55 Statut Membre 31
       
      Snif... toujours la même chose...
      0
    3. masterdim Messages postés 55 Statut Membre 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
  3. Pitet Messages postés 2845 Statut Membre 530
     
    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
    1. masterdim Messages postés 55 Statut Membre 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

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?
Miss-Curieuse -
valou -

8 réponses