Rechercher : dans
Par :

Css - décalage sous IE

Dernière réponse le 25 fév 2009 à 10:17:06 daisy, le 25 fév 2009 à 00:00:29 
 Signaler ce message aux modérateurs

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) : http://img5.imageshack.us/my.php?image=csswebaz.png

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 ********************/
Configuration: Windows Vista
Internet Explorer 7.0

Meilleures réponses pour « Css décalage sous IE » dans :
Décalage du son et de l'image d'un fichier vidéo (Divx) VoirLe décalage du son et de l'image d'un fichier Divx, Mkv ou autre peut être dû à un des facteurs suivants : Ordinateur / Lecteur DivX pas assez performant. Il suffit de tester le fichier sur un ordinateur plus rapide pour s'en persuader Codecs...
Désinstaller IE 8 VoirDésinstallation d'IE 8 Vous avez installé IE8 pour le tester et vous souhaitez désormais revenir à une version précédente ? Voici la procédure à suivre pour les OS suivants : Windows Vista Windows XP Windows Vista Ouvrir le...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...

1

nhefti, le 25 fév 2009 à 01:23:38

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 : http://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 !

Répondre à nhefti

2

 daisy, le 25 fév 2009 à 10:17:06

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 !

Répondre à daisy