[CSS] hauteur d'un tableau sous IE

hauteur d'un tableau sous IE [CSS] - HTML/CSS - Programmation

Marsh Posté le 09-09-2008 à 17:38:07    

Bonjour,
J'aimerai comprendre pourquoi mon tableau ne se comporte pas bien avec IE ici !
je veux un tableau "elastique" qui complète mon écran, sauf la premiere ligne qui s'adapte à son contenu.
je ne peux pas passer par des DIV car la 2eme ligne contiendra un motif qui s'alignera au coin en haut à droite de la cellule.
Je me suis dis qu'il fallait donc un tableau de 100% de hauteur, et ne déclarer que la hauteur sur la première ligne, la seconde prennant logiquement le reste de la fenetre...
Et bien sous firefox, OK, mais IE il veut rien savoir, il fait 50/50...
Et si je met 100% en hauteur a la 2eme ligne, IE me rajoutera un scroll, ce que je ne souhaite pas, je veux que le surplus de la hauteur de cette ligne soit tronqué.
Je rappel que celle ci est destiner à contenir un motif de fond qui doit s'aligner au coin haut/droite de la cellule.
 
Voici mon code de test

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Bordel d'IE</title>
  6. <style type="text/css">
  7. <!--
  8. html, body, table {
  9. margin:0px;
  10. border:0px;
  11. border-spacing:0px;
  12. border-collapse:collapse;
  13. empty-cells:hide;
  14. padding:0px;
  15. width:100%;
  16. height:100%;
  17. }
  18. table{
  19. height:100%;
  20. width:100%;
  21. }
  22. .rouge{
  23. text-align:center;
  24. color: #FFFFFF;
  25. background-color:#FF0000;
  26. height:50px;
  27. }
  28. .bleu{
  29. text-align:center;
  30. color: #FFFFFF;
  31. background-color:#000099;
  32. }
  33. -->
  34. </style>
  35. </head>
  36. <body>
  37. <table>
  38.   <tr>
  39.     <td class="rouge">Rouge</td>
  40.   </tr>
  41.   <tr>
  42.     <td class="bleu">Bleu</td>
  43.   </tr>
  44. </table>
  45. </body>
  46. </html>


 
(j'ai lacher les DIV qui me prenait le systeme, et me voila embêté avec les TABLE aussi !)


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 09-09-2008 à 17:38:07   

Reply

Marsh Posté le 09-09-2008 à 20:14:04    

Oué, bizarre ton problème, effectivement.
 
J'ai une page avec une mise en page similaire et je n'ai pas ce problème. En bidouillant un peu, j'ai remarqué qu'en ajoutant avant ton doctype :
 
<?xml version="1.0" encoding="utf-8"?>
 
Ça résoud le problème. Bizarre, puisque normallement c'est ce qui fait passer IE en mode "quirks" avec du XHTML. D'autant plus bizarre que ma page en HTML4.0 transitionnal fait ce qu'elle est sensée faire. Encore plus bizarre, c'est que si je mets un doctype HTML4, ça merde encore avec IE. Enfin bref, ce navigateur est tellement pourri, que ça n'en vaut pas la peine de se prendre la tête à trouver des explications rationnelles.

Reply

Marsh Posté le 09-09-2008 à 21:45:00    

résolu !
enfin, j'ai reussi a obtenir ce que je voulais en DIV (avec lesquels j'avais le même problème).
Pour IE, il fallait mettre une position absolue (ou relative) à la DIV qui contient les 2 autres pour que l'overflow fonctionne. (alors qu'en toute logique elle en a pas besoin). J'ai pas réessayer avec les table, mais je pense que c'est grossomerdo la même chose !


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed