BG décalé avec IE [résolu]

Donc voila,

je travaille sur un projet de site en xhtml mais j'ai encore quelques problemes avec la présentation en css, l'incompatibilité de IE cassant tout.
je suis pas le seul dans le cas et malgrés les astuces données sur le forum, le probleme persiste.
le probleme est que le background des blocs qui est censé etre centré se décalle d'un pixel par rapport au background du 'body'.
mais cela dépend encore de la largeur de la fenetre, si on la redimensione, le décalage bouge.

'fin le mieu serai de voir par vous-meme :
http://dhost.info/worldofseb/seebz.com/

edit: au fait, bravo pour le site
Modifié par seebz (05 Aug 2006 - 11:21)

Bonjour aussi seebz et bienvenue sur Alsacréations ,

a écrit :
se décalle d'un pixel par rapport au background du 'body'.

1 pixel, l'heure est grave .

En parcourant brièvement ton code css, tout semble placé au cordeau, au pixel prêt. Es-tu sûr de toutes tes mesures ?

oui je pense bien , sinon ça ne s'afficherai pas bien avec firefox.
en plus j'ai déja galéré pour que ca s'affiche de la meme facon avec ie et firefox.

c'est vrai que ca peut sembler bete de se prendre la tete pour 1 pixel mais se site devra me servir a trouver un boulot vu que je vais faire des études en web design, donc, une erreur de présentation sur la page, ca le fait pas trop

'fin si qq1 à une solution, c'est le bienvenu

voila, je reposte ici pasque j ai un probleme, tjs du meme style.
j explique, pour avoir une présentation semblable sur firefox et IE, j'ai mis dans mon css un 'hack IE' trouvé sur ce forum : http://forum.alsacreations.com/topic-1-16563-1-Dcalage-de-block-dans-IE.html
(2 eme post, par Taly)

j'ai donc ajouté des *margin dans le css, qui du coup ne passe plus la validation w3c.

y a t-il un moyen de faire le fameux 'hack ie' de facon a ce que le css soit valide ?



edit : solution : j'ai utilisé un css pour ie contenant un import de l'autre plus les margin sans le *.
le probleme est que je dois maintenant détecter le navigateur et linker la feuille de style en conséquence
Modifié par seebz (30 Jul 2006 - 22:34)

seebz a écrit :

edit : solution : j'ai utilisé un css pour ie contenant un import de l'autre plus les margin sans le *.
le probleme est que je dois maintenant détecter le navigateur et linker la feuille de style en conséquence

Pas besoin, tu peux utiliser les commentaires conditionnels pour IE, c'est fait pour çà:
Qu'est-ce que les commentaires conditionnels ?

article tres interressant, et pratique par la meme occasion, merci pour le tuyau igor

par contre je me demande si ce sera vraiment pratique avec un 'theme switcher' en php , dans le cas ou il y a un theme sans css ie.
'fin j y suis pas encore

c est ok la, c est le plus important

un petit 'up', au cas ou

j'ai lu ici : http://forum.alsacreations.com/topic-1-16730-1-resoluProbleme-decalage-IE-3-pixel-.html
qu'il y avait moyen de résoudre ce genre de probleme mais mes connaissances étant assez limitées, je n'arrive pas à résoudre mon probleme (malgrés la lecture du lien proposé par mpop et quelques tests).

donc, ceci est un appel a quelqu'un d'expérimenté.

seebz a écrit :
un petit 'up', au cas ou

j'ai lu ici : http://forum.alsacreations.com/topic-1-16730-1-resoluProbleme-decalage-IE-3-pixel-.html
qu'il y avait moyen de résoudre ce genre de probleme mais mes connaissances étant assez limitées, je n'arrive pas à résoudre mon probleme (malgrés la lecture du lien proposé par mpop et quelques tests).

donc, ceci est un appel a quelqu'un d'expérimenté.

Est-ce que tu as également un problème de Three Pixel Jog (décalage de 3px aux abords d'un flottant, avec IE Win), ou bien est-ce qu'il s'agit toujours du premier problème, avec un décalage de 1px du background du body ?

Dans le deuxième cas, il me semble que la gestion du positionnement exact des images de fond sur l'élément body est assez problématique. En général, on évite de placer sur body un fond qui ne soit pas une couleur unie ou un motif répétable, surtout quand l'image de fond choisie doit s'aligner au pixel près avec d'autres images des éléments enfants et descendants de body.

En général, on passera donc par un bloc global. Au pire, si les besoins de mise en page sont contraignants, on pourra imbriquer deux blocs (div) l'un dans l'autre.

mpop a écrit :

Est-ce que tu as également un problème de Three Pixel Jog (décalage de 3px aux abords d'un flottant, avec IE Win), ou bien est-ce qu'il s'agit toujours du premier problème, avec un décalage de 1px du background du body ?

Non, il s'agit toujours du premier problème.

mpop a écrit :

Dans le deuxième cas, il me semble que la gestion du positionnement exact des images de fond sur l'élément body est assez problématique. En général, on évite de placer sur body un fond qui ne soit pas une couleur unie ou un motif répétable, surtout quand l'image de fond choisie doit s'aligner au pixel près avec d'autres images des éléments enfants et descendants de body.

Donc, si je comprend bien, le décalage est du au fait que les bloc ne sont pas de la même 'génération', ou plutot les enfants du body (dans ce cas des div) se décallent par rapport au body.

mpop a écrit :

En général, on passera donc par un bloc global. Au pire, si les besoins de mise en page sont contraignants, on pourra imbriquer deux blocs (div) l'un dans l'autre.

Si je comprend bien, le mieu dans ce cas serait de mettre un div supplémentaire qui contiendrait alors le background que j'avais mit au body.

Mais est-ce vraiment correct point de vue XHTML qui est censé ne contenir que le contenu (je veux dire par là, pas de balise inutile, uniquement utilisée pour la mise en page).

Apparement, le XHTML propre est encore difficile à faire pour l'instant, IE en cause, mais les 'normes' w3c devront améliorer ça avec le temps.
Il serait temps surtout que Microcrotte se mette à niveau de ce coté là.

En tout cas, je te remercie mpop pour tes éclairssissements

Bonsoir,

Rassure-toi: le div conteneur est très bien, très propre, très sémantique et très valide : il répond parfaitement au rôle défini pour div en HTML

Sinon, Firefox commet également ce type de bug d'alignement au pixel près. Inutile d'incriminer IE

Laurent Denis a écrit :
Bonsoir,
Rassure-toi: le div conteneur est très bien, très propre, très sémantique et très valide : il répond parfaitement au rôle défini pour div en HTML

Je suis content de l'entendre, j'hésitais à l'utiliser

Pour firefox, je suis d'accord aussi mais je trouve qu'il est quand meme beaucoup plus perfomant.

Pour ma page, j'ai donc fait une modif et ajouter un div autour des blocs centraux et je me retrouve confronté à un autre problème.

Le fameux div qui est censé afficher le bg de facon correct (sans le décalage avec IE) contient donc des autres div ayant des positions flotantes et du coup ne veut plus du tout afficher de bg , avec firefox car sur IE ca marche pour une fois.
Je ne suis pas sur mais je pense que ce probleme est du au fait que le div est vide pour le navigateur (a cause des float).
J'avais lu quelque part qu'il y avait moyen de corriger ca, mais je n'arrive plus à retrouver la méthode exacte, le terme à rechercher.

Par contre, je n'ai plus besoin de faire un hack IE pour bien afficher les fenetre flottante et ca c'est déja vachement bien.

Bon , ca doit pas etre tres clair :

a écrit :
<body>
<div=header><img header><div>
<div=menu>menu (y a du float dedans aussi)</div>
<div=nouveau_div>
<div=left>Flottant à gauche</div>
<div=right>Flottant à droite</div>
<div=right2>Flottant à droite</div>
</div>
<div=footer>mon footer</div>
</body>

Donc voila, les parties en rouge n'affichent aucun bg sous firefox

J'me demande si j'y arriverais un jour

En testant divers code avec le div nouveau :

float: left; le footer remonte juste en dessous du menu (tjs pas de bg)
clear: both; juste une ligne de bg entre le menu et le div nouveau
overflow: auto; adieu les div float(le foot en dessous du menu)
display: table; les div float à droite du menu (totalement décalé)

J'suis à court d'idée la
Modifié par seebz (04 Aug 2006 - 22:06)

En fait, il faudrait ajouter un DIV global vraiment global :

<body>
<div id="global">

</div>
</body>

C'est à ce DIV que tu dois ajouter l'image de fond qu'il y a actuellement sur BODY (en laissant la couleur à BODY) C'est également à ce div qu'il faut mieux spécifier la largeur. (notamment pour des raison de compatibilité avec Internet Explorer 5.x)

Pour le centrer il faut éviter l'astuce des marges négatives. C'est utilisé pour centrer une boîte qui est positionnée de manière absolue, mais il ne faut pas passer une boîte en position absolute juste pour utiliser l'astuce (qui peut poser certains problèmes) : des marges horizontales avec la valeur « auto » suffisent. Si le centrage est souhaité avec IE5 également, utiliser « text-align » sur le parent fait l'affaire :

body {
text-align: center;
}
#global {
width: 654px;
margin: 0 auto;
text-align: left;
}

J'ai vu également que certains flottants avaient des marges horizontales. Il y a une petite astuce qui consiste à ajouter display: inline; dans ce cas afin qu'Internet Explorer ne double pas la valeur de la marge.
Modifié par Alan (04 Aug 2006 - 23:09)

Merci Alan pour tes conseils,

le display: inline marche du tonnerre

J'ai donc 'déplacé' mon div et modifier le css comme expliqué. Impeccable, je n'ai plus besoin non plus de marge négative

Par contre, ne pouvant toujours pas enlever les float (sinon ils s'affichent en dessous et non à coté), je me retrouve toujours avec le même problème qu'avant (pas de bg pour le menu et les blocs avec float), mis à par que mon code devient plus propre au fur à mesure.

J'en arrive presque à regretter le temps des 'table'
et me demande presque si je ne devrais pas ouvrir un nouveau post car le titre du sujet n'est plus vraiment d'actualité.

En tout cas, je remercie déja tout le monde (igor, mpop, laurent denis et alan) pour les conseils donnés car ca m'a déja bien permis d'améliorer le code et surtout d'apprendre pas mal de choses

Tu as plusieurs solutions : tu peux par exemple enlever le float:right qui est actuellement sur #copyright en ajoutant clear:both.

Alan a écrit :
Tu as plusieurs solutions : tu peux par exemple enlever le float:right qui est actuellement sur #copyright en ajoutant clear:both.

Et le tour est joué (ca parait si simple vu comme ca).

Je te remercie grandement et j'espère pouvoir un jour comprendre la subtilité de ces codes légèrement inhabituels (enfin par rapport aux width, heigth et tout ca).

En tout cas, j'ai eu un bel appercu de ce qu'est le xhtml et css et j'ai l'impression que je risque encore de revenir poster par ici.. mais d'un autre coté, j'ai aussi l'impression que je dormirais moin bête

Encore merci à tous pour vos conseils et bonne continuation à alsacréations.. c'est d'la balle
Modifié par seebz (05 Aug 2006 - 11:22)

seebz a écrit :

Encore merci à tous pour vos conseils et bonne continuation à alsacréation.. c'est d'la balle

Après avoir rajouter un s à Alsacréations, tu pourras donc rajouter un résolu à ton sujet: Comment éditer un sujet sur le forum, et comment classer un sujet en [Résolu] ?