28172 sujets

CSS et mise en forme, CSS3

Calage des margin sous IE

Bonjour
j'ai un soucis de positionnement avec ces 2 blocs qui pour l'instant compose toute ma page
<body>
<div id="header"></div>
<div id="contain"></div>

</body>


body{
	background-color: #144c72;
	background-image: url(images/fond_total.jpg);
	background-repeat: no-repeat;
	background-position: top;
	margin:0;
}
#header{
	background-image: url(images/header_mpoc.jpg);
	background-repeat: no-repeat;
	background-position: center;
	height: 552px;
	width: 1185px;
	margin: 0 auto;
}
#contain{
	width:1000px;
	min-height:673px !important;
	background-color:#FFF;
	margin:0 149px 0 151px;
}


en fait dans mon image fond_total.jpg j'ai une partie de mon bloc blanc et dans contain je voulais faire descendre ce bloc. ca fonctionne tres bien sous FF mais sous IE il y a un leger decalage de qqs pixels que je n'arrive pas a gérer
une idée?
merci
Nadege
Salut Nadège

Pourrais tu mettre cette page quelque part en ligne? Ton explication n'est pas claire sans visuel de cette image de fond....

A bientot
Salut!

convertie tes pages en utf8 SANS BOM

pour ça tu ouvre tes fichier avec notepad++ et tu fais convertir l'encodage en utf8 sans bom.
Modifié par JuseN (06 Jul 2012 - 15:36)
Merci de vos réponses l'enregistrement sous notepad ne donne rien.
Pour le reste il s'agit de chanson et mon client veut que ca reste confidentiel pour le moment
Je vous met une capture ecran qui montre le décalage entre l'image du header et le div blanc en dessous = seulement sur IE upload/44507-Sans-titre.jpg
Salut

Pas facile sans suffisamment d'info.
Voici quelques pistes:
- Vérifie les découpes de tes images
- pour "background-position" mets y les valeurs pour le positionnement horizontal et vertical
exemple: background: center top
- il se peut que ca vienne du style du #container:
"margin:0 149px 0 151px;"
Mets-y plutot ce fond blanc en image de fond de body centré horizontalement

Bon week end
rien non fonctionne
par contre y a t'il un moyen de notifier des infos pour IE et des autres pour les autres navigateurs
car ca ca marche
margin:0 149px 0 151px;
margin:0 151px 0 149px;/*SOUS IE */

merci
Oui, mais pour les margin je pence pas , pour les background oui, exemple : 

background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
Administrateur
Bonjour,

il semble que tu mélanges les centrages d'images de fond avec background-position et le centrage de contenu avec margin: 0 auto; (et des largeurs différentes selon les blocs ?).
Tu n'arriveras pas à contenter tous les navigateurs à la fois dans toutes les résolutions d'écran parce que chaque navigateur a sa méthode d'arrondi et que le calcul dépend de la largeur des blocs et de la résolution de la fenêtre. Que faire quand il faut laisser 245,5px à gauche et à droite ? Chaque navigateur fait comme il peut ...

Il faut que tu choisisses une largeur commune à tous les blocs principaux de ta page, ceux à centrer avec margin: 0 auto;, leur coller une couleur de fond si possible et ensuite ça dépend fortement de tes images ... Que leur design dépende au px près de la position du contenu ET que ça doive être découpé en plusieurs parties au lieu d'appliquer une seule image de fond ne va pas aider ...
Sujet clos
Aller à