5568 sujets

Sémantique web et HTML

Plusieurs div dans un tableau et hauteur à 100%

Bonjour à tous,

je suis face à un problème depuis un petit moment, et je ne trouve aucune solution, existe il une méthode différente ou tout simplement une option javascript pour que cela fontionne.

voici mon problème : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<style>
TD.bordTLRB {
  BORDER: solid 1px #346AA6;
}
</style>
</head>
<body>
  <p>&nbsp;</p>
  <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" height="400px">
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td rowspan="15" valign="top" class="bordTLRB" height="100%"><div valign="top" id="div" style="padding: 0px; background-color: orange; cursor: move; position: relative; top: 0px; left: 0px; height: 100%;" align="left">TEST2</div></td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td rowspan="15" valign="top" class="bordTLRB" height="100%"><div valign="top" id="div2" style="padding: 0px; background-color: orange; cursor: move; position: relative; top: 0px; left: 0px; height: 100%;" align="left">TEST1</div></td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
  </table>
  <p>&nbsp;    </p>
  </body>
  </html>

Idée générale :
Le code est long, mais il ne fait rien de spécial, l'appli complète est un agenda, d'où l'utilisation de tableau qui est plus appropriée. Les <div> permettraient d'encadrer les événements enreigstrés pour pouvoir les déplacer (ajax). Mais l'idée serait que les div prennent toute la hauteur des cellules où ils se trouvent.

Explication du problème :
Sous IE, les 2 div sont bien affichés. aucun souci apparant
Sous FF, bizarrement, seul le 2eme div prend toute la place du <td>, alors que le 1er div reste dans sa hauteur minimale. essayez chez vous c'est incompréhensible.

Donc si quelqu'un a déjà eu se problème et sait comment le résoudre, je veux bien avoir un tuyau. Si il y a une autre solution pour l'affichage d'un agenda avec des événements et des div, je suis preneur aussi Smiley biggrin
bon courage

A+

Frognico

EDIT : Merci pour l'info, j'ai modifié le doctype...plus propre, mais aucun changement sur l'affichage.
Modifié par frognico (14 Jul 2007 - 10:27)
Bonjour,

Pour commencer, travailler en mode Standard plutôt qu'en mode Quirks serait un plus. Il faudrait donc changer le Doctype pour sa version complète (avec URL de la DTD).
Sujet clos
Aller à