28172 sujets

CSS et mise en forme, CSS3

[résolu] Décalage d'une image de fond (<body>) dans IE 7

bonjour,

j'ai fait quelques recherches sur le sujet mais je n'arrive pas à comprendre la nature du problème qui se produit sur cette page :
http://www.bilin-village.org/english/photos/

sur IE 7, ça ressemble à ça :
http://browsershots.org/screenshots/5dfbe0adf6776019b861446c88f9e360/

je n'ai pas de PC pour tester, mais c'est un ami qui m'a signalé le problème

voici un extrait de la CSS concernant l'image de fond :


body {
	padding: 0;
	margin: 0 auto;
	height: 100%;
	color: #333;
	background: url(img/fond_banniere.jpg) no-repeat 50% 0 #2d2d2d;
	font-family: "Lucida Grande", Verdana, "Bitstream Vera Sans", sans-serif;
	font-size: .8em;
}


et un autre extrait concernant l'affichage des albums photos qui semblent poser problème sous IE (car sur les autres pages dans lequelles il n'y a pas ces albums, l'image de fond n'est pas décalée)


div.zp_album {
	float: left;
	background: url(img/cadre-photo-zp.png) 0 0 no-repeat;
	width: 100%;
	min-height: 170px;
	margin: 2em 0 0 0;
}

div.zp_album img {
	float: left;
	margin: 9px 25px 0 11px;
	border: 0;
}

div.zp_album a {
	color: #333;
	text-decoration: none;
}

div.zp_album a:hover {
	color: #690;
}


div.zp_album h3 {
	font-family: "Lucida Grande", Verdana, "Bitstream Vera Sans", sans-serif;
	color: #333;
	font-size: 1em;
	margin: .5em 0 0 0;
	padding: 0;
}


div.zp_album p {
	font-family: "Lucida Grande", Verdana, "Bitstream Vera Sans", sans-serif;
	margin: 0;
	padding: 0;
	font-size: .8em;
}

div.zp_album p.compteur {
	font-family: "Lucida Grande", Verdana, "Bitstream Vera Sans", sans-serif;
	font-weight: bold;
	color: #888;
}


merci d'avance pour vos lumières
Modifié par Melody Nelson (01 Jul 2008 - 20:01)
Hello Melody Nelson Smiley cligne ,

pour qu'un position:absolute; fonctionne dans IE7 il faut obligatoirement préciser l'un des attributs top, right, bottom ou left ce qui n'est pas le cas pour #footer.

Un simple
#footer {
	left: 0;
}
devrait régler le problème.

A+
merci

je viens de vérifier, il y a bien un 
bottom: 0;
dans #footer

dommage, je trouvais ça miraculeux que ça soit aussi simple et juste un oubli de ma part... par contre, il y a peut-être des boulettes ailleurs dans la CSS que je ne vois pas...
Melody Nelson a écrit :
je viens de vérifier, il y a bien un 
bottom: 0;
dans #footer

dommage, je trouvais ça miraculeux que ça soit aussi simple et juste un oubli de ma part... par contre, il y a peut-être des boulettes ailleurs dans la CSS que je ne vois pas...
Pourtant j'ai fait un test avec le left:0; et ça corrige le décalage Smiley smile !

Mais comme je dis ça de mémoire, ça ne fonctionne peut-être qu'avec left et right Smiley rolleyes ?
génial, merci beaucoup à toi !

puis-je abuser de ta bonté et de ton windows en te demandant de me dire si, par hasard, ça ne résoud pas aussi un autre problème d'affichage ?

problème signalé par un ami : une sorte de décalage du fond de page qui se présente alors de cette manière :

http://skitch.com/melodynelson/q5kt/pbmicael

la page en question est ici :

http://www.bilin-village.org/english/articles/press-and-independent-media/Ramallah-commemorates-the-ongoing-Nakba
Modifié par Melody Nelson (01 Jul 2008 - 05:23)
Melody Nelson a écrit :
si, par hasard, ça ne résoud pas aussi un autre problème d'affichage ?
Ah, non ! Désolé Smiley murf !

Par contre un #page_content { overflow: hidden; } oui Smiley ravi !
hahaha, bien vu !

merci encore, tu résouds mes problèmes en 10 secondes alors que je m'acharnais à chercher ailleurs car les problèmes n'apparaissaient que dans certains cas (par exemple, uniquement quand des images - mais avec une présentation particulière - figuraient dans les pages) et évidemment seulement avec explorer... ce qui ne rend pas les choses simples à tester quand t'as pas explorer... j'ai hâte d'avoir un mac intel pour me faciliter la vie !
Melody Nelson a écrit :
tu résouds mes problèmes en 10 secondes alors que je m'acharnais à chercher ailleurs car les problèmes n'apparaissaient que dans certains cas (par exemple, uniquement quand des images - mais avec une présentation particulière - figuraient dans les pages) et évidemment seulement avec explorer... ce qui ne rend pas les choses simples à tester quand t'as pas explorer... j'ai hâte d'avoir un mac intel pour me faciliter la vie !
C'est tout l'intérêt d'un regard extérieur Smiley smile !

Par contre c'est vrai que faire une mise en page sans avoir Windows et IE sous la main ! Smiley fut Pffff !

A+
Heyoan a écrit :
C'est tout l'intérêt d'un regard extérieur Smiley smile !


exactement... la plupart du temps je cherche et finis par trouver une solution mais là je tournais trop en rond, et en plus pas sur la bonne piste, alors je me suis résolue à demander de l'aide...
Sujet clos
Aller à