déplacement de div sous ie

[Friedrich]

Bonjour à tous,

Je suis novice dans la création de sites web et j'ai un petit problème avec internet explorer.

Mes pages s'affichent parfaitement sous mozilla,mais avec certaines versions de ie (anciennes) et/ou certaines résolutions d'écran, mes div prennent trop de place et déplacent les autres.

Il parait que c'est un problème récurrent avec ie mais je ne parviens pas à trouver de réponses adaptées à mon problème.

Voici une partie du code de mon interface graphique :

body {
position:absolute;
background-color:#FFFFFF;
width:100%; min-width:900px
margin:auto;
font-size:12px;
font-family:Arial;
text-align:center;
color:#969696;
}


#conteneur {
position:relative; margin-left:auto; margin-right:auto;

background-color:#FFFFFF;
width:100%; min-width: 900px;
height:auto;
text-align: left;
}


h1#header {
width:100%;
height:130px;
background-color: #0000FF;

margin-top:0px;
}


div#menu {
float:left;
padding-left:2%; padding-top:5px; padding-right:1%; margin-top:10px;
width:15%; min-width:160 px; background-color:#FFFFFF;
}


div#menu ul {

margin:0;
padding:0; background-color:#FFFFFF;
}


div#menu li { margin-left:20px; }


div#corps {
float:left;
width:60%; min-width:500px;
padding-right:2%; padding-top:5px; margin-top:10px; margin-left:1%;
background-color:#FFFFFF; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-left:2%;
}


div#droit {
float:left;
width:13%; min-width:100px;
height:auto;
padding-top:5px; padding-right:2px; padding-left:3px; margin-top:10px; margin-left:1%; margin-right:1%;
background-color:#FFFFFF;
}






p#footer {
width:100%;
height:73px;

margin-bottom:0;
clear:both; background-color:#FFFFFF
;
text-align:center;
}

 

[screuscreu]

sans url/html ... ,on peut quasiment rien faire

 

[Friedrich]

Voici l'url :

http://www.code-promotion-poker.com/

Je suis également preneur d'autres conseils concernant design ou référencement.
Merci bien.

 

[dd32]

Bonjour,

En général ce genre de problèmes sous IE est dû aux margin qui sont affectés aux div quand on leur applique un float.
Afin de résoudre le problème et de réduire ces margin, il suffit d'appliquer un "display:inline;" au div auquel tu as mis un float.

 

[rudddy]

compléments :

https://www.webrankinfo.com/forum/viewt ... htm#966496
https://www.webrankinfo.com/forum/t/mon-site-pas-comme-il-faut-sous-ie6.100526/

Bonne chance

 

[Friedrich]

Merci pour vos réponses.

Je viens de me rendre compte que les div vont à la ligne uniquement quand la résolution d'écran est inférieure (en pixels) à la largeur cumulée de mes div (chose étrange puisque la largeur des div est exprimée en %).
Et ce uniquement sous ie6 apparemment.

Voici le résultat avec une réso de 640 X 1534 :
http://browsershots.org/screenshots/139 ... 55e057ddc/

J'ai vu que j'avais laissé trainer des "margin-left: 20px" ... par ci par là (voir code plus haut). Le problème viendrait-il de là?

 

[rudddy]

donc ie 6 rajoute 3 px sur chaque div (vu que j'avais 3 colonnes c'était 9 px qui étaient apparu !!!)

source : https://www.webrankinfo.com/forum/viewt ... htm#966496

 

[Friedrich]

donc ie 6 rajoute 3 px sur chaque div (vu que j'avais 3 colonnes c'était 9 px qui étaient apparu !!!)

Et donc tu as juste ajouté "-margin:0 0 0 7px;" dans ton code et le problème était résolu?

 

[rudddy]

exact : le tiret signifie "ne prendre en compte cette ligne que si nav = IE6"

 

[Friedrich]

Cool, j'essaye ça. Merci