Bonjour,
J'ai un petit souci que je ne parviens pas à résoudre.
Je suis en train de concevoir un site web (conforme xhtml 1.0 strict et css 1.0).
J'essais de respecter les normes (a moins d'une erreur de ma part ce qui reste possible).
Mais même en respectant les normes je n'arrive pas à faire afficher la bonne hauteur à mes éléments (div/table/span/p je les ais tous essayé un par un) sous Firefox (1.0PR et 1.0RC1) alors que sous IE, cela fonctionne.
Remarque: j'ai mis height: 100% pour les tags html et body (j'ai également essayé sans).
Exemple 1 trés simple:
pour le CSS
.mon_truc {
border: solid 1px;
height: 100%
}
pour le html
[div class="mon_truc"]
toto
[/div]
sous Ie, j'ai bien un rectangle qui va de haut en bas de ma page, sous FireFox, ca reste juste autour de toto.
Exemple 2 trés simple:
pas de CSS
pour le html
[div style="border: solid 1px; height: 100%"]
toto
[/div]
sous Ie, j'ai bien un rectangle qui va de haut en bas de ma page, sous FireFox, ca reste juste autour de toto.
J'ai également essayé en replancant div par table (avec les TR/TD qui vont bien) , puis par P puis SPAN puis un P dans un SPAN puis un SPAN dans un P, le tout dans un DIV, dans un TABLE, l'inverse. Bref, je suis à court d'idée.
FireBird refuse obstinément de grandir en hauteur un élément (cela fonctionne trés bien en largeur).
Voila, si quelqu'un sais comment faire afficher un "truc" avec une hauteur de 100% (sur toute la page, mais en % pas de hauteur fixe) je lui en serai trés rconnaissant.
ps: j'ai remplacé les < et > par [ et ] car je ne savais pas si cele allait s'afficher.
Forum Programmation.web Firebird + CSS + parametre height
30
oct.
2004
# C'est normal...
Posté par Edouard Gomez (site web personnel) . Évalué à 3.
http://www.w3.org/TR/CSS21/visudet.html#the-height-property(...)
Si la taille de la boite parente n'est pas connue, alors le pourcentage equivaut à auto, ce qui revient à ajuster la taille de la boite au contenu de celle ci.
Pour résoudre le problème, ta balise body doit avoir une taille fixe, par exemple avec ce genre de CSS:
body { position: absolute; top: 0; bottom: 0; width: 100%;}
puis alors la classe:
.mybox { height: 100%;}
fonctionnera (le public applaudit).
A savoir que IE ne sait pas utiliser 'top' et 'bottom' à la fois (ni 'left' et 'right'), pour cela il faut jouer avec des trucs pas standard du tout, du type:
.couvretout { top: 0; height: expression(document.window.offsetHeight) + 'px'; }
(je me souviens plus trop si les noeuds DOM cités ci-dessus sont corrects, je les donne de mémoire)
Donc encore un point, où tu vas te prendre la tête à avoir une version standard, et quelque chose pour IE... dans ce cas je te conseille un truc du genre:
<link rel="stylesheet" type="text/css" href="standard.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="trucPourIE.css" />
<![endif]-->
La CSS trucPourIE.css surcharge les proprietes standards pour satisfaire IE... pas besoin de dire que ca devient vite le bordel de gérer le set d'attributs standard et à coté tous les workarounds pour IE. En tout cas cette solution devrait te permettre de garder une CSS standard CSS 2.1 par exemple, parce que je vois de plus en plus de CSS complètement saccagées par des CSS hacks...
[^] # Re: C'est normal...
Posté par bax42 . Évalué à 1.
Cela fonctionne.
Par contre ce n'etait ni clair, ni évident.
Il est explicitement marqué que height (ou width) se base sur la taille de l'objet pere (Ex si je met un TABLE dans un DIV, le %height du TABLE sera fonction de la taille du DIV). Ca je l'avais compris.
Le cas moins explicite est celui ou le BODY (le HTML meme) est le pere de mon objet.
En effet, je ne fixe pas de HEIGHT pour le body (enfin si mais a 100%), donc je pensait que le HEIGHT de mon objet fils (un TABLE dans un BODY par exemple) serai calculé en fonction de la taille courrante du BODY (c'est exactement ce qui se passe sous IE d'ailleur).
enfin, remarcis quand meme pour l'astuce
[^] # Re: C'est normal...
Posté par bax42 . Évalué à 0.
Cela fonctionne.
Par contre ce n'etait ni clair, ni évident.
Il est explicitement marqué que height (ou width) se base sur la taille de l'objet pere (Ex si je met un TABLE dans un DIV, le %height du TABLE sera fonction de la taille du DIV). Ca je l'avais compris.
Le cas moins explicite est celui ou le BODY (le HTML meme) est le pere de mon objet.
En effet, je ne fixe pas de HEIGHT pour le body (enfin si mais a 100%), donc je pensait que le HEIGHT de mon objet fils (un TABLE dans un BODY par exemple) serai calculé en fonction de la taille courrante du BODY (c'est exactement ce qui se passe sous IE d'ailleur).
enfin, remarcis quand meme pour l'astuce
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.