Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Différence de comportement dans FireFox et IE6

15 réponses
Avatar
METIS
Bonjour,
soit une DIV avec la CSS:

#bloc_droite
{
float:right;
position:relative;
height:400px;
text-align:left;
width: 380px;
}

Dans IE6, le contenu pousse le bas de la DIV si la hauteur
indiquée ne suffit pas.
Dans FireFox le bas de la DIV n'est pas poussé, le contenu
sort et recouvre ce qui est dessous.

Qui aurait une solution, ou un site pour gogol (moi) qui
explique bien comment régler la question(;o)))).

Accessoirement, qui aurait un truc qui marche partout pour
"header+3col+footer...?
On en trouve sur beaucoup de site, mais ya toujours un
problème...

--
<|[;o)) METIS
http://www.graphM.com
Remplacer wawamoo par ce qu'il faut...

5 réponses

1 2
Avatar
METIS
Laurent vilday wrote:
Vi il y a un très forte chance pour que ce soit un truc
tout bête.



En fait, c'était très con, juste deux déclarations de
hauteur dans les CSS qui se bouffaient le nez.
Ce qui est bête, c'est que ça marchait quand même dans IE6
et pas dans FireFox...

--
<|[;o)) METIS
http://www.graphM.com
Remplacer wawamoo par ce qu'il faut...
Avatar
William Marie
"METIS" a écrit dans le message de news:
46e93da8$0$25940$
Bonjour,
soit une DIV avec la CSS:

#bloc_droite
{
float:right;
position:relative;
height:400px;
text-align:left;
width: 380px;
}

Dans IE6, le contenu pousse le bas de la DIV si la hauteur indiquée ne
suffit pas.
Dans FireFox le bas de la DIV n'est pas poussé, le contenu sort et
recouvre ce qui est dessous.

Qui aurait une solution, ou un site pour gogol (moi) qui explique bien
comment régler la question(;o)))).

Accessoirement, qui aurait un truc qui marche partout pour
"header+3col+footer...?
On en trouve sur beaucoup de site, mais ya toujours un problème...



J'ai évidemment été confronté à ce problème. Donc après avoir pris ma
tête chenue entre mes mains, j'ai réussi à piger le problème : IE6 n'a pas
tout à fait la même logique que FF ou Opera dans la gestion des marges. Donc
après avoir réussi a trouver la logique commune de tous les navigateurs je
me suis fendu d'un petit tuto sur mon site expérimental pour éviter à la
jeunitude (et pas seulement elle) une "prise de tête".
--
=================================== William Marie
Attention antiSpam remplacer trapellun.invalid
par free.fr
Web : http://wmarie.free.fr
http://www.pandemonium.dnsalias.org (site expérimental)
====================================
Avatar
Laurent vilday
William Marie a écrit :
"METIS" a écrit dans le message de news:



Après relecture du thread, je crois que j'ai compris le "problème".

#bloc_droite
{
float:right;
position:relative;
height:400px;
text-align:left;
width: 380px;
}

Dans IE6, le contenu pousse le bas de la DIV si la hauteur indiquée ne
suffit pas.





Parce que IE6 ne respecte malheureusement pas la propriété height
puisqu'il dépasse la height imposée lorsque le contenu est trop "grand".

Dans FireFox le bas de la DIV n'est pas poussé, le contenu sort et
recouvre ce qui est dessous.





Ce qui est le comportement correct puisque height spécifiée.

Pour obtenir le même compormtent sous FF que IE6, il faudrait appliquer
un min-height. Hors IE6 ne connait pas (IE7 connait par contre)

Donc, la solution (une des solutions) c'est d'utiliser les "bugs"
(features ?) de parsing de IE6. Pour lui faire comprendre une propriété
rien que pour lui, suffit d'ajouter un _ (underscore) devant la
propriété. IE7 n'expose plus ce problème d'analyse et donc n'en tiendra
pas compte.

#block_droite { min-height:400px; _height:400px }

J'ai évidemment été confronté à ce problème. Donc après avoir pris ma
tête chenue entre mes mains, j'ai réussi à piger le problème : IE6 n'a pas
tout à fait la même logique que FF ou Opera dans la gestion des marges.



Quand on est mode de rendu quirks. Mode a éviter comme la peste
effectivement à cause du problème de calcul des margin+padding+border
qui n'est pas égal à la width/height de l'élément.

<http://www.quirksmode.org/css/quirksmode.html>

Mais pas quand on est en mode strict de rendu.

--
laurent
Avatar
METIS
Laurent vilday wrote:
#block_droite { min-height:400px; _height:400px }



J'ose plus rien toucher, j'ai fait autre chose et ça
marche...
Merci, nez en moins. (;o)))))

--
<|[;o)) METIS
http://www.graphM.com
Remplacer wawamoo par ce qu'il faut...
Avatar
METIS
William Marie wrote:
après avoir réussi a trouver la logique commune de tous
les navigateurs je me suis fendu d'un petit tuto sur mon
site expérimental pour éviter à la jeunitude (et pas
seulement elle) une "prise de tête".



Vais voir ça donc...
Merci !!!

--
<|[;o)) METIS
http://www.graphM.com
Remplacer wawamoo par ce qu'il faut...
1 2