[Résolu]Pourquoi IE (encore lui) n'applique pas le margin-top ?

Bonjour

Structure HTML :

[url=upload/15172-structureH.jpg][img]upload/15172-structureH.jpg[/img][/url] 

Code CSS :

#ja-wrapper {
	background: url(../images/bd-bg.gif) repeat-x 0 5px #FFFFFF;
	width: 984px;
	margin-right: auto;
	margin-left: auto;
	[#red]margin-top: 15px;[/#]
}
...
[#red]#ja-headerwrap,
#ja-mainnavwrap,[/#]
#ja-botslwrap,
#ja-footerwrap {
	clear: both;
}
...
#ja-mainnavwrap {
	background: url(../images/mainnav-bg.gif) repeat-x top;
	color: #CCCCCC;
}
...
#ja-headerwrap {
	height: 150px;
}

Rendu IE7 :


Rendu IE6 :


Afin de donner l'illusion de la fameuse page qui décolle du fond (avec l'ombre qui va bien), j'ai utilisé la propriété margin-top pour la div #ja-wrapper (celle-ci englobe l'ensemble du contenu de la page) pour la détacher du haut de la fenêtre du navigateur.
Le rendu sous FF (bon élève) est correct, à l'inverse sous IE7, la propriété margin-top ne s'applique pas ainsi que sous IE6.
Et en plus, pour ce dernier, une réaction inattendue : #ja-wrapper occupe la largeur de 1024px alors qu'il ne devrait avoir un width de 984px.

Merci pour votre aide

P.S. : les boîtes noires qui masquent les menus et logo, ne sont là que pour préserver une certaine confidentialité. Merci de votre compréhension
Modifié par ThVi (22 Aug 2008 - 10:50)

Salut,

Peut être un problème de fusion des marges, essaye de placer un padding-bottom: 1px; à <a name="Top" id="Top">

ghost a écrit :
Salut,

Peut être un problème de fusion des marges, essaye de placer un padding-bottom: 1px; à <a name="Top" id="Top">

Non, la page n'a pas bougé d'un iota.

Bonjour,

Ton titre est erroné, c'est un margin-top qui est ignoré, pas un padding-top.
Et il s'agit d'un des bugs les plus prise de tête d'Internet Explorer (versions 6 et 7 confondues), que je rencontre au moins une fois par projet. Dans certaines conditions (que je n'ai pas encore bien cernées, mais ça implique du HasLayout pour le conteneur ou l'élément enfant ou les deux...), les margin-top mais aussi margin-left et margin-right (pas margin-bottom) du premier enfant d'un conteneur peuvent être tout simplement ignorées.

Solution «simple»: utiliser du padding à la place (sur l'élément enfant ou le conteneur).
Solution plus subtile: pas trouvée encore. Peut-être quelque chose à base de HasLayout...

Florent V. a écrit :
Bonjour,

Ton titre est erroné, c'est un margin-top qui est ignoré, pas un padding-top.
Et il s'agit d'un des bugs les plus prise de tête d'Internet Explorer (versions 6 et 7 confondues), que je rencontre au moins une fois par projet. Dans certaines conditions (que je n'ai pas encore bien cernées, mais ça implique du HasLayout pour le conteneur ou l'élément enfant ou les deux...), les margin-top mais aussi margin-left et margin-right (pas margin-bottom) du premier enfant d'un conteneur peuvent être tout simplement ignorées.

Solution «simple»: utiliser du padding à la place (sur l'élément enfant ou le conteneur).
Solution plus subtile: pas trouvée encore. Peut-être quelque chose à base de HasLayout...

Titre rectifié

J'avais déjà essayé le padding-top sur #ja-wrapper et #ja-mainnavwrap (élément enfant de #ja-wrapper) mais le résultat attendu n'était pas au rendez-vous.
Cependant, tu m'amènes à une piste : appliquer le padding-top à l'élément parent de #ja-wrapper, à savoir body#bd. Et ça fonctionne ! Mon conteneur #ja-wrappeur se décale vers le bas.

Merci pour la piste

Et un problème de moins. Super !

Je vais encore vous « casser la tête » avec le rendu d'IE6.

En effet, celui-ci, au niveau du header s'étale sur 1024px alors qu'il ne devrait se restreindre à 984px imposés par le conteneur #ja-wrapper.

Une idée ou piste ?

Merci encore
Modifié par ThVi (17 Aug 2008 - 16:20)

Pour ton deuxième problème, ça vient de là:

#ja-containerwrap,
#ja-containerwrap-f,
#ja-containerwrap-fr,
#ja-containerwrap-fl {
	width: 1025px;
	margin-left: -20px;
}

IE6 ne gère pas bien la propriété width: si le contenu d'un bloc est plus large que le bloc, au lieu de faire dépasser le contenu il va élargir le bloc. Le seul moyen d'empêcher ça est d'utiliser overflow:hidden sur le bloc, ce qui a pour fâcheuse conséquence de masquer tout ce qui dépasse.
IE7 corrige ce bug, comme tu peux le constater.

Solution: donner une largeur de 1025px à div#ja-wrapper (conteneur global), et utiliser des marges pour les enfants de ce conteneur.
Ou bien, à tester: ne pas donner de largeur à #ja-containerwrap-* (c'est pas super efficace cette multiplication des identifiants, si?), et tester avec juste margin: 0 -20px;. Ça passe sur Firefox, mais je ne sais pas trop ce que ça donnera sur IE6 et 7.

En passant, un conteneur de 1025px de large... ben c'est pas loin de 30px de trop.
Et aussi: tes ombres ne sont pas raccord.
Modifié par Florent V. (17 Aug 2008 - 15:17)

Florent V. a écrit :
Pour ton deuxième problème, ça vient de là:

#ja-containerwrap,
#ja-containerwrap-f,
#ja-containerwrap-fr,
#ja-containerwrap-fl {
	width: 1025px;
	margin-left: -20px;
}

IE6 ne gère pas bien la propriété width: si le contenu d'un bloc est plus large que le bloc, au lieu de faire dépasser le contenu il va élargir le bloc. Le seul moyen d'empêcher ça est d'utiliser overflow:hidden sur le bloc, ce qui a pour fâcheuse conséquence de masquer tout ce qui dépasse.
IE7 corrige ce bug, comme tu peux le constater.

Solution: donner une largeur de 1025px à div#ja-wrapper (conteneur global), et utiliser des marges pour les enfants de ce conteneur.
Ou bien, à tester: ne pas donner de largeur à #ja-containerwrap-* (c'est pas super efficace cette multiplication des identifiants, si?), et tester avec juste margin: 0 -20px;. Ça passe sur Firefox, mais je ne sais pas trop ce que ça donnera sur IE6 et 7.

En passant, un conteneur de 1025px de large... ben c'est pas loin de 30px de trop.
Et aussi: tes ombres ne sont pas raccord.

J'étais en train de préparer un autre post pour ce problème, mais tu m'as devancé... Trop fort !

Bon, je n'ai plus qu'à le recoller dans mon précédent message.

a écrit :
c'est pas super efficace cette multiplication des identifiants, si?

Effectivement, mais c'est du Joomla ! tout craché.

a écrit :
En passant, un conteneur de 1025px de large... ben c'est pas loin de 30px de trop.
Et aussi: tes ombres ne sont pas raccord.

Oui, ça fait large. C'est parce que j'ai fait une découpe de l'image à « l'arrache ».
Par rapport aux ombres, c'est parce qu'il y a un écart de dimension entre ma maquette Photoshop et le template Joomla !. Mais ça aussi, je rectifierai.

En tout cas, je te remercie énormément. Tu m'en as sorti des épines du pied
Je peux te dire que j'apprends beaucoup avec le forum et ta contribution est dès plus précieuse.

Merci encore

a écrit :
Ou bien, à tester: ne pas donner de largeur à #ja-containerwrap-* (c'est pas super efficace cette multiplication des identifiants, si?), et tester avec juste margin: 0 -20px;. Ça passe sur Firefox, mais je ne sais pas trop ce que ça donnera sur IE6 et 7.

Pour te répondre :
oui, le rendu est correcte sous Firefox.
Et oui aussi, le rendu est correct sous IE :
- IE6 ;
- IE7.

Cependant, les ombres n'apparaissent plus, ce qui est logique car le width imposé est celui de #ja-wrapper (984px).
Ce que je ne saisi pas, par rapport à IE7, c'est l'ombre qui se trouve à gauche de #ja-containerwrap. Il ne devrait pas être présente puisque la largeur héritée de #ja-wrapper est de 984px.
En fait, je pense que l'apparition de cette ombre est dû mon filet de background de #ja-containerwrap qui a été mal réalisé.
Modifié par ThVi (18 Aug 2008 - 08:02)