Geckozone

Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
https://forums.mozfr.org/

Probleme affichage de div height 100% dans un td

https://forums.mozfr.org/viewtopic.php?t=55647

Page 1 sur 1

Probleme affichage de div height 100% dans un td

Publié : 21 juin 2007, 17:03
par frognico
Bonjour,

J'ai un soucis dans firefox pour afficher des div avec une hauteur de 100% dans des cellules...elles mêmes a 100% pour que le div en fasse autant.

Voici un exemple de mon problème.

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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>
Je ne comprend pas pourquoi un des deux div s'affiche comme il faut, mais pas l'autre ?! est ce que quelqu'un pourrait m'aider :lol: ça a l'air tout simple, ça marche sous IE, mais pas sous firefox 2.0.0.4...bizarre :?

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Publié : 21 juin 2007, 17:23
par calimo
Bonjour et bienvenue sur Geckozone cher Frognico :wink:

Déjà, il va falloir penser sérieusement à identer ton code (mettre des retours à la ligne et des espacements, si possible en tabulation), parce que là c'est totalement incompréhensible ! :?

Ensuite je ne pense pas que l'utilisation de tableaux soit judicieuse... beaucoup de code inutile pour juste de la mise en forme... en plus ce n'est pas très accessible (pour ceux qui n'utilisent pas des navigateurs graphiques) :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Publié : 21 juin 2007, 18:00
par chinon37
un simple passage dans Kompozer a permis d'indenter le code, mais pfffou!, un mise en page par tableaux, grrrrr :evil: c'est vraiment se prendre la tête. Et pourquoi mettre des div dans les cellules?
Et pourquoi attribuer des "id" aux <div>, ces id n'ayant aucune propriété?

Que de questions...

Publié : 21 juin 2007, 18:11
par frognico
Merci pour votre attention,

c'est un exemple pris sur un programme plus complet, j'ai laissé les id par oubli, car j'effectue d'autres traitements sur les divs par la suite. Ils ne servent a rien dans cette exemple.

Effectivement c'etait un peu crado, sans les sauts à la ligne, c'est le copier/coller qui est le fautif ! :wink:

Le tableau semblait plus approprié, c'est pour afficher un agenda...mais si vous avez une autre solution je suis preneur, car mes divs ne veulent vraiment pas prendre toute la hauteur du td...du coup je suis bloqué dans cette configuration.

Ou, si vous savait pourquoi les divs ne passe pas a 100% je suis preneur aussi :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Publié : 27 juin 2007, 08:49
par frognico
Bonjour tout le monde,

Je relance la question sur ce problème car je bloque toujours et je n'ai trouvé aucune solution pour le moment, si quelqu'un pouvait m'aider ! SVP

Je suis preneur de n'importe quelle idée pour faire avancer le chmilblic !

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Publié : 27 juin 2007, 10:03
par calimo
Pour un agenda, l'utilisation d'un tableau me semble raisonnable.
Ton code semble à peu près correct... tu es bien sur qu'il n'y a aucune différence ? À quoi sert le position:relative ? En as-tu vraiment besoin ?

C'est peut-être un bug... as-tu testé dans d'autres navigateurs ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Publié : 27 juin 2007, 11:11
par frognico
Merci pour l'aide.

Oui j'ai bien testé dans Ie et tout fonctionne comme il faut, et même sous Safari pour windows...

Pour le position relative, m'est utile plus tard pour des déplacements (with ajax)...cela fonctionne dans le prog complet, j'ai juste ce problème d'affichage qui persiste dans FF.

Je pense que c'est effectivement un bug dans FF...mais je ne veux pas m'emballer.

C'est pour ça que je fais appel à vous...au cas ou une solution existerait

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Publié : 03 juil. 2007, 17:34
par frognico
Bon...je pense qu'il n'y a pas réellement de solution pour ce problème :cry: tant pis...je crois que je vais laisser tomber.
Merci quand même pour l'aide
A+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Fuseau horaire sur UTC+02:00
Page 1 sur 1

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru