Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP IE 6 et le dimensionnement vertical en %

IE 6 et le dimensionnement vertical en %

21 réponses
Avatar
Patrick 'Zener' Brunet
Bonjour.

Je me suis attaqué au positionnement+dimensionnement vertical en % parce que
j'en avais besoin (et envie).

Donc pour qui l'ignorerait, ça ne marche sur IE qu'en mode "quirks", en mode
standards une hauteur en % nécessite un conteneur dimensionné, et la hauteur
de la page est en fait assimilée à celle de la fenêtre.
http://blog.alsacreations.com/2004/05/13/3-height
http://pompage.net/pompe/pieds/
http://www.developpez.net/forums/showthread.php?t=147365
etc.

Dans mon cas, j'ai besoin d'un cadre positionné en absolu au bas de la page
et dont la hauteur fasse 50% de la page. J'utilise par ailleurs des pieds de
page, le tout en CSS pur.
Avec Firefox comme avec IE5, ça passe, mais avec IE 6, c'est 50% de la
hauteur de la fenêtre, point barre, et donc ce serait sans espoir à moins de
passer par du javascript ou de restructurer toute la page pour ça :-@

Donc j'ai imaginé de développer un petit composant HTC qui corrige ce
comportement, et ça marche finalement très bien. Son principe est de
transformer la hauteur du "master-div" (utilisé pour positionner le pied de
page) en une hauteur absolue en px, mise à jour à chaque modification de la
fenêtre.
Il est disponible sur cette page qui sert aussi de démo:
http://www.ipzb.fr/1/Fr/Files/Free/Files-WebScripts
(notice à l'intérieur du code)

J'aimerais bien avoir des avis sur les points suivants:
- quel est le comportement avec IE 7 ? (le HTC n'est chargé que pour IE 6),
- est-ce que les quelques contraintes mentionnées dans la notice pourraient
être relâchées ?
- avez-vous une idée de ce qui cause le comportement bizarre de la démo
(uniquement) sur IE 6 ?

Merci de ces retours.
--
Cordialement.
--
/**************************************************\
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
\**************************************************/
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3
Avatar
William Marie
"Patrick 'Zener' Brunet" a écrit
dans le message de news: fg2d56$4a4$

Je ne sais pas si ça répondra véritablement à tes problèmes, mais j'ai
remarqué que si on a, par exemple, 3 boîtes DIV positionnés en absolute, il
y a un décalage de hauteur entre IE (7 dans mon cas mais c'est pareil avec
6) et FF-Opera. Même en bataillant avec les margin:0 et les padding:0 ça ne
change rien. Et puis j'ai trouvé la solution par hasard : il faut enfermer
ces trois boîtes DIV dans une autre qui n'est alors qu'un bête conteneur.
Voir le code de ma page d'accueil Free, l'avant dernière rangée (logo des
navigateurs, boîte texte, et image Danasoft).
--
=================================== William Marie
Attention antiSpam remplacer trapellun.invalid
par free.fr
Web : http://wmarie.free.fr
http://www.pandemonium.dnsalias.org (site expérimental)
====================================
Avatar
remy
William Marie a écrit :
"Patrick 'Zener' Brunet" a écrit
dans le message de news: fg2d56$4a4$

Je ne sais pas si ça répondra véritablement à tes problèmes, mais j'ai
remarqué que si on a, par exemple, 3 boîtes DIV positionnés en absolute, il
y a un décalage de hauteur entre IE (7 dans mon cas mais c'est pareil avec
6) et FF-Opera. Même en bataillant avec les margin:0 et les padding:0 ça ne
change rien. Et puis j'ai trouvé la solution par hasard : il faut enfermer
ces trois boîtes DIV dans une autre qui n'est alors qu'un bête conteneur.
Voir le code de ma page d'accueil Free, l'avant dernière rangée (logo des
navigateurs, boîte texte, et image Danasoft).




tu peux rentrer dans les détails stp
j'ai le même problème avec l'img de fond
sur laquelle je superpose d'autres images pour changer la couleur de
l'image du fond histoire de faire des boutons qd la souris survole la zone

entre ie et firefox sous linux j'ai une petite poignée de pixels d'écart
vers le bas se qui fait que les dessins ne sont pas raccords

ma principale difficulté s'est que je n'ai qu'une petite semaine
d'expérience avec css
et avec google ben j'ai pas trouvé comment régler le problème

ma feuille de style complète

body{
background:url(img/fond.gif) 0 0 repeat-x #fff ;
background-position:10px 7px;
background-repeat: no-repeat ;
background-attachment : fixed;
color:#5F7A77;
font:13px/19px Arial, Helvetica, sans-serif;
}


#ecrire a{width:68px; height:111px; position: relative; left:610px;
top:-165px; display:block;
background:url(img/ecrire.gif) 0px; 0px; no-repeat;
text-indent:-200000px; margin:px 0px 0 0;}
#ecrire a:hover{background:url(img/ecrire1.gif) 0 0 no-repeat;}

merci remy
Avatar
remy
remy a écrit :
en gros cela donne
http://cjoint.com/data/kDoLWhNHMg.htm
Avatar
SAM
remy a écrit :

entre ie et firefox sous linux j'ai une petite poignée de pixels d'écart
vers le bas se qui fait que les dessins ne sont pas raccords

ma feuille de style complète

body{
background:url(img/fond.gif) 0 0 repeat-x #fff ;
background-position:10px 7px;
background-repeat: no-repeat ;
background-attachment : fixed;
color:#5F7A77;
font:13px/19px Arial, Helvetica, sans-serif;
}



Ben curieux c'truc qui dit une chose suivie de ses contraires ...

body{
background: url(img/fond.gif) 10px 7px no-repeat #fff ;
background-attachment : fixed; /* c'est utile çà ? */
color: #5F7A77;
font: 13px/19px Arial, Helvetica, sans-serif;

/* pour tromper IE si c'est vrai ce que dit William */
display: block;
margin: 0;
}


#ecrire a{width:68px; height:111px; position: relative; left:610px;
top:-165px; display:block;
background:url(img/ecrire.gif) 0px; 0px; no-repeat;
text-indent:-200000px; margin:px 0px 0 0;}
#ecrire a:hover{background:url(img/ecrire1.gif) 0 0 no-repeat;}



K'est-ce que c'est tous ces ; dans le background ?
Avec un top négatif de 165px on arrive à voir le lien de 111px ?

#ecrire a {
width: 68px; height: 111px;
position: relative; display: block;
left: 610px; top: -165px;
background: url(img/ecrire.gif) top left no-repeat;
text-indent: -200000px;
margin: 0;
}
#ecrire a:hover {
background-image: url(img/ecrire1.gif)
}


Après, pour les histoires de décalages faudrait savoir :
- qu'est-ce 'ecrire' ? (div ... quoi ?)
- est-il positionné ?
- a-t-il une bordure ? (pas interprétée pareil par IE et les autres)
- a-t-il marges, padding ?


--
sm
Avatar
remy
SAM a écrit :
remy a écrit :

entre ie et firefox sous linux j'ai une petite poignée de pixels d'écart
vers le bas se qui fait que les dessins ne sont pas raccords



ma feuille de style complète

body{
background:url(img/fond.gif) 0 0 repeat-x #fff ;
background-position:10px 7px;
background-repeat: no-repeat ;
background-attachment : fixed;
color:#5F7A77;
font:13px/19px Arial, Helvetica, sans-serif;
}



Ben curieux c'truc qui dit une chose suivie de ses contraires ...

body{
background: url(img/fond.gif) 10px 7px no-repeat #fff ;
background-attachment : fixed; /* c'est utile çà ? */



oui mais pas pour cette page une petite erreur

color: #5F7A77;
font: 13px/19px Arial, Helvetica, sans-serif;

/* pour tromper IE si c'est vrai ce que dit William */
display: block;
margin: 0;
}




ok je fais le teste



#ecrire a{width:68px; height:111px; position: relative; left:610px;
top:-165px; display:block;
background:url(img/ecrire.gif) 0px; 0px; no-repeat;
text-indent:-200000px; margin:px 0px 0 0;}
#ecrire a:hover{background:url(img/ecrire1.gif) 0 0 no-repeat;}



K'est-ce que c'est tous ces ; dans le background ?
Avec un top négatif de 165px on arrive à voir le lien de 111px ?




j'avais prévenu je débute et n'aspire pas à faire carrière :-)

voix off heureusement
#ecrire a {
width: 68px; height: 111px;
position: relative; display: block;
left: 610px; top: -165px;
background: url(img/ecrire.gif) top left no-repeat;
text-indent: -200000px;
margin: 0;
}
#ecrire a:hover {
background-image: url(img/ecrire1.gif)
}


Après, pour les histoires de décalages faudrait savoir :
- qu'est-ce 'ecrire' ? (div ... quoi ?)
- est-il positionné ?
- a-t-il une bordure ? (pas interprétée pareil par IE et les autres)
- a-t-il marges, padding ?




merci

remy
Avatar
Patrick 'Zener' Brunet
Bonjour William.

"William Marie" a écrit dans le message de news:
4725a32b$0$20112$
"Patrick 'Zener' Brunet" a écrit
dans le message de news: fg2d56$4a4$

Je ne sais pas si ça répondra véritablement à tes problèmes, mais j'ai
remarqué que si on a, par exemple, 3 boîtes DIV positionnés en absolute,
il y a un décalage de hauteur entre IE (7 dans mon cas mais c'est pareil
avec 6) et FF-Opera. Même en bataillant avec les margin:0 et les
padding:0 ça ne change rien. Et puis j'ai trouvé la solution par hasard :


il
faut enfermer ces trois boîtes DIV dans une autre qui n'est alors qu'un


bête
conteneur.
Voir le code de ma page d'accueil Free, l'avant dernière rangée (logo des
navigateurs, boîte texte, et image Danasoft).



Navré mais on ne parle pas du tout de la même chose: en regardant ton code
je ne vois aucun positionnement ni dimensionnement vertical en %.
Tout est fait en px et ça, la plupart des navigateurs savent plus ou moins
faire.

Moi je parle d'un <div> positionné en absolu et dont la hauteur doit être
50% de la hauteur de page, ce qui donne en fait 50% de la hauteur de fenêtre
avec IE en mode standards.
Ce problème est réputé insoluble, à moins de renoncer aux % ou de forcer le
container en unités fixes, donc de perdre la relation avec le texte contenu.

Et donc je propose une solution qui fonctionne pour ce cas précis, et pour
laquelle je souhaite des retours.
--
Cordialement.
--
/**************************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
**************************************************/
Avatar
SAM
Patrick 'Zener' Brunet a écrit :

Et donc je propose une solution qui fonctionne pour ce cas précis, et pour
laquelle je souhaite des retours.



Je n'ai pas Windows ... ça va donc limiter ;-)

Ceci étant ... pourquoi la méthode

html, body { height: 100%; margin: 0; }
#demi { position: absolute; height: 50%; width: 100%; bottom: 0px; }

ne te convient-elle pas ?


--
sm
Avatar
Patrick 'Zener' Brunet
Bonjour SAM.

"SAM" a écrit dans le message
de news: 472604b5$0$5089$
Patrick 'Zener' Brunet a écrit :
>
> Et donc je propose une solution qui fonctionne pour ce cas précis, et
> pour laquelle je souhaite des retours.

Je n'ai pas Windows ... ça va donc limiter ;-)

Ceci étant ... pourquoi la méthode

html, body { height: 100%; margin: 0; }
#demi { position: absolute; height: 50%; width: 100%; bottom: 0px; }

ne te convient-elle pas ?




Si elle marchait, j'en serais ravi.

Mais avec IE 6 pour Windows, elle ne marche qu'en mode quirks (le mode de IE
5). En mode standards le 50% donne la moitié de la hauteur de la fenêtre, et
pas de la page :-@

Donc dans mon cas, en mode menu fixe et pour les pages qui scrollent, le div
ne complète pas le cadre du menu, il y a un gros trou entre les deux et ça
m'a énervé assez pour que je perde 3h à développer ce patch, après avoir
fait le tour des sites de développeurs et trouvé le genre de conclusions que
j'ai citées dans mon premier post.

Au fait, avec IE pour Mac, ça donne quoi en menu fixe ? Le fond bleu descend
jusqu'en bas ou ça .erde d'une manière ou d'une autre ?

Merci.
--
Cordialement.
--
/**************************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
**************************************************/
Avatar
remy
SAM a écrit :


/* pour tromper IE si c'est vrai ce que dit William */
display: block;
margin: 0;
}




et Willian a raison merci a vous 2
http://cjoint.com/data/kDrOznswdO.htm

remy
Avatar
SAM
Patrick 'Zener' Brunet a écrit :
Bonjour SAM.



Hello Pat',

"SAM" a écrit dans le message
de news: 472604b5$0$5089$

Ceci étant ... pourquoi la méthode

html, body { height: 100%; margin: 0; }
#demi { position: absolute; height: 50%; width: 100%; bottom: 0px; }

ne te convient-elle pas ?



Si elle marchait, j'en serais ravi.



Bon, donc ça ne marche pas chez toi.

Mais avec IE 6 pour Windows, elle ne marche qu'en mode quirks (le mode de IE
5). En mode standards le 50% donne la moitié de la hauteur de la fenêtre, et
pas de la page :-@



Je n'ai jamais vu que ça pouvait donner la moitié de la hauteur de la
page (sans donner une *vraie* hauteur à cette page)

Et même si ... que devient-ce quand on fait agrandir les caractères ?
(une demo *simple simple* en ligne ? avec le minima, qu'on puisse voir
tt de suite et éventuellement capter)
Là ... s'il faut passer en mode "menu fixe" sans savoir comment faire
... je ne verrai pas grand chose.
Ha! ça y est (c'était écrit en tout petit tout petit, coquin va !)
Bon, et maintenant, que faut-il regarder ?
(ou est le bas de page de hauteur 50% de je ne sais quoi ?)
Ha! mais c'est à gauche qu'il faut regarder et pas en bas !
Je me demande si ce n'est pas un peu compliqué uniquement pour colorer
le dessous du menu ? (car finalement, le div du menu ne s'agrandit pas
réellement)

Au fait, avec IE pour Mac, ça donne quoi en menu fixe ? Le fond bleu descend
jusqu'en bas ou ça .erde d'une manière ou d'une autre ?



Heu ... le IE Mac ne connait pas
- les *.htc ou *.hta ... donc pas concerné
- merdouille sec avec les bottom ...

et avec : http://www.ipzb.fr/1/Fr/Files/Free/Files-WebScripts
il me dit que j'envoie un formulaire ... hop! refusé.
Qu'est-ce que c'est que ce bintz ?
Bon allez, voyons voir ... c'est un peu la cagade, pas d'image, le bleu
du fond de menu arriverait presqu'en bas si le pieds de page ne
s'étendait pas en hauteur (les 3 images de droite non affichées
remplissent cette hauteur), menu illisible (il faudrait des jumelles),
en haut des trucs se superposent, ascenseur horizontal avec supplément
vide à droite = largeur du menu, mais globalement le vrai contenu est
lisible.
Passé la fenêtre d'IE à 1680px de large, le menu arriverait presqu'en
bas (les images du footer ne s'alignent touj pas bien qu'elles tentent
de le faire). En contrepartie la page s'agrandit en hauteur pour se
remplir de vide sous le contenu principal (s'agrandit de ces fameux 50%
me montre l'option "JavaScript").

Ça a l'air de fonctionner avec Safari qui a rechargé sans prévenir.

--
sm
1 2 3