xhtml/css: décalage de marges spécifique à IE7
Publié : 07.08.2008 - 16h21 par superpantoufle
Bonjour, vous!
Je me permets une rapide incursion dans cette section du forum que je fréquente assez peu, avec un problème qui me chagrine depuis quelques jours: un gros décalage de marges spécifique à IE7. Ça se passe sur www.trophallaxy.ch.
A l'heure où j'écris, ce site est en production depuis quelques semaines parce que ce problème était passé inaperçu: j'ai été dilettante et très optimiste en ayant la flemme de configurer une machine virtuelle juste pour lancer IE7 (ma grande faute!), et mes « clients » (mon frère et ses copains) ont tous des Mac ou des vieux pécés. Mais à ma décharge, le site a exactement la tête qu'il doit avoir sous Safari Mac/PC, Firefox Mac/PC et IE6.
Mes pages sont en xHTML 1.0 transitional, et ont la structure suivante:
Mon bloc principal de contenu (#contenu_int) est imbriqué dans un bloc vide (#contenu_ext) qui n'est là que pour servir de support à une image de fond pour la déco. Mais ce bloc externe reste a priori positionné correctement; c'est le bloc interne qui se décale de 140px sur la droite.
Ces éléments sont stylés de la manière suivante:
On dirait donc que sous IE7 mon bloc #contenu_int ne supporte pas d'être superposé à la barre de navigation verticale (#nav_vert), et fiche le camp à droite pour trouver de la place. Mais comme deux screenshots valent mieux qu'une longue explication vaseuse et un tas de code fumeux, voici ce que ça donne:
Click for full size - Uploaded with plasq's Skitch
NB: ici les blocs incriminés ont une bordure de couleur pour bien les distinguer!
Click for full size - Uploaded with plasq's Skitch
Alors voilà, je sèche complètement. Mais c'est la première fois que j'ai un rendu aussi différent avec IE7 que les navigateurs potables. Et ça m'enquiquine d'autant plus que sur ce coup-là IE6 ne pratiquement pas embêté: j'ai seulement dû donner une marge négative à #contenu_ext pour qu'il accepte de chevaucher la barre de navigation.
Du coup je m'en remets à la sagacité d'un cukien plus expérimenté que moi! A vot' bon coeur m'sieur dames, et merci d'avance!
Je me permets une rapide incursion dans cette section du forum que je fréquente assez peu, avec un problème qui me chagrine depuis quelques jours: un gros décalage de marges spécifique à IE7. Ça se passe sur www.trophallaxy.ch.
A l'heure où j'écris, ce site est en production depuis quelques semaines parce que ce problème était passé inaperçu: j'ai été dilettante et très optimiste en ayant la flemme de configurer une machine virtuelle juste pour lancer IE7 (ma grande faute!), et mes « clients » (mon frère et ses copains) ont tous des Mac ou des vieux pécés. Mais à ma décharge, le site a exactement la tête qu'il doit avoir sous Safari Mac/PC, Firefox Mac/PC et IE6.
Mes pages sont en xHTML 1.0 transitional, et ont la structure suivante:
Code : Tout sélectionner
<div id="conteneur">
<div id="entete">
Titre et en-tête…
</div>
<div id="nav_haut">
<ul id="sections">
Barre de navigation principale (horizontale)…
</ul>
</div>
<div id="nav_vert">
Barre de navigation secondaire (verticale)
</div>
<div id="contenu_ext">
<div id="contenu_int">
Bloc principal de contenu…
</div>
</div>
<div id="pied">
Pied de page…
</div>
</div>
Mon bloc principal de contenu (#contenu_int) est imbriqué dans un bloc vide (#contenu_ext) qui n'est là que pour servir de support à une image de fond pour la déco. Mais ce bloc externe reste a priori positionné correctement; c'est le bloc interne qui se décale de 140px sur la droite.
Ces éléments sont stylés de la manière suivante:
Code : Tout sélectionner
#nav_vert{
margin: 200px 0 0 10px;
padding: 0;
width: 110px;
font-size: .8em;
float: left;
}
#contenu_ext{
margin: 0 20px 0 0;
padding: 0;
background: url("../images/tribalhaut.png") no-repeat top;
}
#contenu_int{
margin: 0;
padding: 20px 30px 20px 150px;
min-height: 400px;
background: url("../images/tribalbas.png") no-repeat bottom;
font-size: .8em;
}
On dirait donc que sous IE7 mon bloc #contenu_int ne supporte pas d'être superposé à la barre de navigation verticale (#nav_vert), et fiche le camp à droite pour trouver de la place. Mais comme deux screenshots valent mieux qu'une longue explication vaseuse et un tas de code fumeux, voici ce que ça donne:
Click for full size - Uploaded with plasq's Skitch
NB: ici les blocs incriminés ont une bordure de couleur pour bien les distinguer!
Click for full size - Uploaded with plasq's Skitch
Alors voilà, je sèche complètement. Mais c'est la première fois que j'ai un rendu aussi différent avec IE7 que les navigateurs potables. Et ça m'enquiquine d'autant plus que sur ce coup-là IE6 ne pratiquement pas embêté: j'ai seulement dû donner une marge négative à #contenu_ext pour qu'il accepte de chevaucher la barre de navigation.
Du coup je m'en remets à la sagacité d'un cukien plus expérimenté que moi! A vot' bon coeur m'sieur dames, et merci d'avance!