Css - décalage sous IE

daisy -  
 daisy -
Bonjour,

Lorsque l'on réduit la taille de l'écran sous IE (50% au lieu de 100%) et bien le texte n'est plus au milieu et le menu se décale, je n'ai pas se souci sous mozilla ! comment faire pour éviter cela s'il vous plait ?

Voici une image pour vous montrer le pb (voir les flèches rouges) : https://imageshack.com/

Le code si besoin :
body {
margin : auto;
padding : 0;
font-size: 12px;
color : #000000;
font-family: Arial, Helvetica, sans-serif;
background: #f5bcd5 ;
}

img {
border: 0;
}

form {
margin: 0;
padding:0;
}

input, textarea , select {
font-family : Verdana, Arial, Helvetica, sans-serif;
padding : 2px;
color : #000000;
font-size : 11px;
background : #ae6e80;
border : 1px solid #501520;
font-weight: normal;
margin: 1px;
}




/******************** LIENS ********************/ 

a {
color : #000000;
font-weight: bold;
text-decoration: none;
}

a:hover {
color : #000000;
font-weight: bold;
text-decoration: underline;
}

#header_bas ul {
list-style-type : none;
padding: 0;
margin: 0;
padding-right: 130px;
}

#header_bas li {
float : right;
padding: 0;
margin: 0;
}

#header_bas li a {
background : url('images/header_lien.png') no-repeat;
width: 134px;
font-size: 12px;
padding: 6px 0px 7px 0px;
display : block;
text-align: center ;
color : #FFFFFF;
text-decoration: none;
font-weight:bold;
margin: 0 8px 0 8px;
}

#header_bas li a:hover { 
color : #F8C2CB;
text-decoration: none;
}

#menu_gauche a {
color: #666666;
text-decoration: none;
font-weight: normal;
}

#menu_gauche a:hover { 
color: #666666;
text-decoration: underline;
}

#footer a {
color : #FFFFFF;
text-decoration: none;
}

#footer a:hover { 
color : #FFFFFF;
text-decoration: underline;
}

/******************** LIENS ********************/ 




/******************** DESIGN GLOBAL ********************/ 

#fond_global {
background: url('images/fond.png') repeat-x top;
min-height: 651px;
}

#global {
margin : auto;
width: 1013px;
padding-top: 18px;
}

#header {
height: 171px;
}

#header_bas {
background: url('images/header_bas.png') no-repeat;
height: 33px;
}

#stats_1 {
float: left;
background: url('images/stats_1.png') no-repeat;
width: 244px;
height: 96px;
}

#stats_1 p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 42px 42px 0 80px;
text-align: center;
}

#stats_2 {
float: left;
background: url('images/stats_2.png') no-repeat;
width: 223px;
height: 96px;
}

#stats_2 p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 42px 42px 0 60px;
text-align: center;
}

#stats_3 {
float: left;
background: url('images/stats_3.png') no-repeat;
width: 223px;
height: 96px;
}

#stats_3 p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 42px 42px 0 52px;
text-align: center;
}

#stats_4 {
float: left;
background: url('images/stats_4.png') no-repeat;
width: 323px;
height: 96px;
}

#stats_4 p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 36px 142px 0 52px;
text-align: center;
}

#container_header {
clear: both;
background: url('images/container_header.png') no-repeat;
height: 30px;
}

#container_fond {
background: url('images/container_fond.png') repeat-y;
}

#menu_gauche {
float: left;
width: 161px;
padding-top: 15px;
position: relative;
left: 43px;
}

#menu_gauche p {
padding: 0 14px 0 14px;
}

.menu_separ {
height: 2px;
background: url('images/menu_separ.png') no-repeat;
margin: 18px 0 18px 0;
}

#contenu_centre {
float: left;
width: 648px;
padding-top: 10px;
position: relative;
left: 63px;
}

#news {
height: 73px;
background: url('images/news.png') no-repeat;
margin-bottom: 14px;
}

#news p {
margin: 0;
color: #FFFFFF;
font-weight: bold;
padding: 28px 30px 0 126px;
}

.bloc_1_fond {
background: url('images/bloc_1_fond.png') repeat-y;
}

.bloc_1_fond p {
margin: 0;
padding: 2px 35px 0 35px;
text-align:justify;
font-size: 11px;
}

.bloc_1_bas {
background: url('images/bloc_1_bas.png') no-repeat;
height: 31px;
margin-bottom: 14px;
}

.bloc_2_fond {
background: url('images/bloc_2_fond.png') repeat-y;
}

.bloc_2_fond p {
margin: 0;
padding: 2px 35px 0 35px;
text-align:justify;
font-size: 11px;
}

.bloc_2_bas {
background: url('images/bloc_2_bas.png') no-repeat;
height: 29px;
margin-bottom: 14px;
}

#pub_droite {
float: right;
width: 141px;
padding-top: 40px;
}

.pub_haut {
background: url('images/pub_haut.png') no-repeat;
height: 44px;
}

.pub_fond {
background: url('images/pub_fond.png') repeat-y;
text-align: center;
padding-right: 2px;
}

.pub_bas {
background: url('images/pub_bas.png') no-repeat;
height: 22px;
margin-bottom: 14px;
}

#container_footer {
background: url('images/container_footer.png') no-repeat;
height: 30px;
}

#pub {
background: url('images/pub.png') no-repeat;
width: 472px;
height: 64px;
margin: 20px 0 20px 0;
position: relative;
left: 230px;
}

#pub p {
margin: 0;
padding-top: 2px;
text-align:center;
}

#footer {
background: url('images/footer.png') no-repeat;
height: 42px;
margin-bottom: 16px;
}

#footer p {
font-weight: bold;
color: #FFFFFF;
padding: 5px 140px 0 40px;
text-align: center;
font-size: 11px;
line-height: 16px;
}

/******************** DESIGN GLOBAL ********************/
A voir également:

2 réponses

nhefti Messages postés 43 Date d'inscription   Statut Membre Dernière intervention   1
 
Je crois que la solution est de tout codé en em et non en px. C'est une histoire de taille absolue et relative. Je ne pourrais pas t'en dire beaucoup plus...

Je te conseille ce site : https://openweb.eu.org/articles/compatibilite_taille_polices

Il est vraiment très bien construit et il te fait réfléchir à la manière dont tu codes ton site (accessibilité, compatibilité entre les navigateurs....).

Bon courage pour ta mise en page !
0
daisy
 
Bonjour,

Non je ne crois pas qu'il y ai besoin de tout coder en em, car avant cela marché en px avec ce code que j'ai du remplasser :

J'avais ça comme css au départ et le pb n'y été pas !
@charset "utf-8";
body {
font-family: Arial, Tahoma;
width: 1063px; /* total size */
margin-left: auto;
margin-right: auto;
background-image: url(images/global/background.png);
background-repeat: repeat-x;
background-color: #f5bcd4;
}

#header0 { background-image: url(images/global/header0-top.png); width: 899px; height: 229px; }
#header0 p { display: block; margin: 0; padding-top: 185px; padding-right: 80px; text-align: right; }
#header0 a { color: white; font-size: 13px; text-decoration: none; padding-left: 82px; }

#header1-stats { background-image: url(images/global/header1-stats.png); width: 899px; height: 70px; }
#header1-stats p { width: 140px; display: block; float: left; color: white; font-size: 13px; margin-top: 0; margin-left: 80px; padding-top: 26px; }

.header2-bar { background-image: url(images/global/header2-bar.png); width: 899px; height: 30px; }
.separate { background-image: url(images/separate.png); width: 142px; height: 6px; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; }

IMG.imgcenter { display: block; margin-left: auto; margin-right: auto; border: none; }
form {width: 152px; /*-20px*/ padding: 10px; }
form label { font-size: 12px; }
form input.input { background-color: #ae6e80; border: 1px solid black; }

ul { padding-left: 0; margin-left: 0; list-style: none; }
ul li a { font-size: 12px; color: #666666; }
ul li a:hover { text-decoration: none; }
.ulalign-left { margin-left: 20px; }
.ulalign-center { width: 100%; margin-left: 0; } .ulalign-center li { text-align: center; width: 100%; margin-left: auto; margin-right: auto; }

#TABLE2 { width: 832px; margin-left: auto; margin-right: auto; }
#TDLEFT { vertical-align: top; width: 172px; background-image: url(images/global/menu-bkg.png); }
#TDRIGHT { vertical-align: top; width: 660px; background-image: url(images/global/content-bkg.png); }

#footer { background-image: url(images/global/footer.png); width: 899px; height: 43px; margin-top: 20px; }
#footer p { color: white; font-size: 13px; text-align: center; margin: 0; padding-top: 5px; }
#footer a { color: white; font-size: 13px; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer-pub { display: block; text-align: center; margin-top: 20px; }

.BOX-bkgRight { background-image: url(images/content-bkgRight.png); background-repeat: repeat-y; width: 622px; /*-20px*/ margin-left: auto; margin-right: auto; }
.BOX-btmRight { background-image: url(images/content-btmRight.png); width: 642px; height: 28px; margin-left: auto; margin-right: auto; margin-bottom: 20px; }
.BOX-bkgLeft { background-image: url(images/content-bkgLeft.png); background-repeat: repeat-y; width: 622px; /*-20px*/ margin-left: auto; margin-right: auto; }
.BOX-btmLeft { background-image: url(images/content-btmLeft.png); width: 642px; height: 28px; margin-left: auto; margin-right: auto; margin-bottom: 20px; }

.BOX-text { padding: 10px; }
.BOX-text p { margin: 0; padding: 0; }

/* specials styles */
#lesnews {
background-image: url(../static/images/content-lesnews.png);
width: 642px;
height: 70px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
#lesnews p {
color: white;
font-size: 13px;
font-weight: bold;
margin: 0;
padding-top: 25px;
padding-left: 120px;
}

#pub-top { margin-top: 400px; background-image: url(images/global/pub-top.png); width: 164px; height: 44px; }
#pub-bkg { background-image: url(images/global/pub-bkg.png); background-repeat: repeat-y; width: 164px; text-align: center; padding-top: 10px; }
#pub-btm { background-image: url(images/global/pub-btm.png); width: 164px; height: 20px; }


J'ai fait faire ces css en payant, je ne suis pas assez calez. J'ai vraiment besoin d'aide svp, j'ai beau chercher sur google, etc, mais je n'y arrive pas, cela fait plusieurs jours que je suis deçue, je suis entrain de péter une pile, lol !
0