Bon affichage partout ... sauf dans IE7 !!!!!!!!!!!!!

Bonjour à tous !
Voilà mon code CSS :

body {
	background-color: #FF9900;
	border: 0px;
	text-align: center;
	background-image: url(OmbreCont4.jpg);
	background-position: center 15px;
	background-repeat: no-repeat;
}

IE7 ne veut pas me centrer mon image !!!!
Je comprends pas ...
ça fait un bon moment que je m'arrache les cheveux là-dessus ...
Alors si quelqu'un avait un "hack" ou au moins une piste à proposer pour une éventuelle solution, JE PRENDS !!!

PS : Le site en question est www.jctp.fr
Testez sous IE7 avec une résolution de 800x600 par exemple pour voir le problème ...
Modifié par kaizersoze10 (14 Jun 2007 - 01:12)

Voici que je lis dans le "mémento CSS" des éditions Eyrolles :

a écrit :
[...] Il est possible de combiner des valeurs en pourcentage et en longueur (ex: background-position: 40% 20px;), mais pas de combiner des mots-clés avec d'autres valeurs.

(Ils entendent par 'mots-clés' top right bottom left, etc...)

Je ne garanti pas que c'est ca, je ne fait que rapporter ce que j'ai lu.

Bonen chance

Non le problème ne vient pas de là ...
J'ai beau remplacer la valeur "center" par un pourcentage, ça ne change rien ...

Et je répète que le problème ne vient que d'IE7 !!!
(Est-ce que c'était bien précisé dans le livre d'Eyrolles ?)

Donc apprenti webmaster CHERCHE TOUJOURS SOLUTION !

Et en associant ton image de fond à "container" plutôt que "body", ça ne fonctionne pas mieux ?

Ce serait peut-être faisable mais ça m'obligerait a revoir tout le positionnement ...

J'espérais qu'on me donnerait sur le forum une solution qui me permette de corriger ce petit bug d'IE7 sans avoir a changé le reste (qui marche nickel sur les autres navigateurs ...)

Quelqu'un à une autre idée ?
Un hack a proposer ???

Personne n'a de solutions a proposer ???
Actuellement, j'ai même plus de cheveux à m'arracher ...

Il n'y a pas que sur IE que ca pose problème. Sur Firefox, en plus petit que 800x600 tout se décale aussi. A ta place, je mettrais que du orange en fond du body, un bande brune avec l'ombre à droite en repeat-y dans le container, et ton image d'en-tête en balise img dans un header. Puisque l'image porte un information, elle ne devrait pas être en image de fond. Ensuite tu peux encore mettre le bas de ton cadre dans un footer.

Ca fait pas d'énormes changements, mais ça sera plus propre et plus robuste.

J'ai le même probleme, impossible à resoudre car IE, n'arrive pas à me compter les 3 propriétés :

background-image
background-position
background-repeat

Essaie d'en enlever un ca devrait marcher.

Mais si tu veux les 3, moi aussi je galere et si tu trouves marques la solution ... Sinon je reeassairé quand j'aurais un peu de temps.

Effectivement, j'avais pas fais gaffe à Firefox dans le cas où on prend une résolution plus petite que 800x600 ...

Bonjour,

Je pense qu'IE est passé en mode quirck à cause de la déclaration xml placée avant le doctype (rien avant pas même un espace sinon quirck pour ie), supprime cette déclaration et tout devrait rentrer dans l'ordre.

C'était bien pensé ... mais j'ai enlevé la déclaration xml comme tu me l'as dit et ça ne change rien pour IE7 ...
Merci quand même !

kaizersoze10 a écrit :
C'était bien pensé ... mais j'ai enlevé la déclaration xml comme tu me l'as dit et ça ne change rien pour IE7 ...

Tu avais un rendu correct dans IE 6 malgré le prologue XML en début de fichier ? Du coup, pas étonnant qu'un rendu correct en mode Quirks dans IE6 donne quelque chose de surprenant en mode standard dans IE7.

Pour rappel, IE 6 ne comprend pas le prologue XML et interprète une page ne mode Quirks pour peu qu'il trouve quelque chose avant le Doctype (commentaires HTML, prologue XML, autres petites choses qui trainent...), tandis qu'IE7 corrige ce problème et interprètera bien la page en mode standard.

Re,

Par contre ta mise en page est comment dire un peu tarabiscotée,
pourquoi ne pas placer ta page dans un conteneur global avec un header reprenant (en background ou dans le code(mieux !)) juste l'image du tracto et du logo suivi dans le flux de ton corps puis du pied de page. Ton global aurait juste la couleur de fond et placé à droite un background de ton ombre en repeat y (ce qui lui permettrait d'éventuellement "s'allonger" en fonction du contenu). Connaissant son width, un margin: auto centrerait ta page dans tous les navigateurs (sauf ie5.5 mais bon !!) ...