Un div décalé sur IE 6 et 7 [Résolu]

[miss_socrates]

J'ai réalisé un site avec une div d'en-tête, une div de menu horizontal et une div de contenu, le tout englobé dans une div conteneur aligné au centre.
L'affichage est correct dans les navigateurs sauf en IE 6 et 7 où le div de contenu est décalé d'env. 1cm vers la droite par rapport aux menus d'en-tête.
En IE5, la page n'est pas centrée mais alignée à gauche.
Y a-t-il un code qui permet de corriger cela afin d'aligner tout correctement?

Merci d'avance.

[12monkeys]

Bonsoir

Je ne vois pas trop comment on pourrait te répondre sans une page en ligne ou a défaut au moins ton code HTML et CSS.

Tu tiens encore compte d'IE 5 ??

[miss_socrates]

Merci de votre réponse.
Le site est à l'adresse : www.haras-dhathor.be
Il s'affiche très bien sur tous les navigateurs sauf sur IE 5, 6 et 7 (et accessoirement IE8 qui ne prend pas en compte border-radius).
Ma cliente doit utiliser l'un de ceux-là et veut que le site soit aligné correctement. je lui ai dit de passer à IE 8 mais elle m'a répondu qu'il n'était pas question qu'elle achète un nouvel ordinateur et que beaucoup de gens emploient encore IE 6 !
Le problème est que je ne peux même pas vérifier mes corrections puisque je ne sais pas installer cette ancienne version avec Seven.
Avec IE 7, on voit bien que la div de contenu est décalé de 1 cm sur la droite par rapport à la bannière /menu alors que les margin et padding sont à 0.

[12monkeys]

Déjà il faudrait optimiser et simplifier tout ça : tu as différentes largeurs qui sont incompréhensibles. Le conteneur fait 950px, les 2 premiers div font 900px, l'ul du menu fait lui 914px, c'est pas logique, uniformises tout ça... Ca règle déjà pas mal de problèmes...
J'ai simplement réduit la taille de container à 900px et le ul dans menu à 900px aussi...

Ensuite sur le positionnement : tu places tes éléments en float:left et en display:inline, a quoi ça sert ? A rien à mon sens...


Pour tester différentes versions de IE tu peux utiliser une machine virtuelle : http://jpvincent.developpez.com/tuto...s-navigateurs/

PS : le message d'alerte qui s'ouvre en quittant le site c'est pénible ! Ça va faire fuir les gens...

[Candygirl]

Hello,

Envoyé par miss_socrates

Le site est à l'adresse : www.haras-dhathor.be
Il s'affiche très bien sur tous les navigateurs sauf sur IE 5, 6 et 7 (et accessoirement IE8 qui ne prend pas en compte border-radius).
Ma cliente doit utiliser l'un de ceux-là et veut que le site soit aligné correctement. je lui ai dit de passer à IE 8 mais elle m'a répondu qu'il n'était pas question qu'elle achète un nouvel ordinateur et que beaucoup de gens emploient encore IE 6 !

Tu lui as dit de passer à IE8 ou IE9 ? Si elle ne peut pas installer IE8 cela signifie qu'elle aurait un OS antérieur à XP ? ça fait vieux, quand même, 10ans pour un pc Pour IE9 c'est, par contre tout à fait compréhensible.

Les gens qui utilisent encore IE6 sont majoritairement des personnes depuis leur travail ou en Asie. Je doute que cela fasse partie de son public-cible majoritaire.

Envoyé par miss_socrates

Avec IE 7, on voit bien que la div de contenu est décalé de 1 cm sur la droite par rapport à la bannière /menu alors que les margin et padding sont à 0.

C'est ton text-align:center sur le .container qui est à l'origine de ce problème, associé à tes calculs de largeur relevés par 12monkeys.

Pour le centrage sur IE5, c'est le margin:auto qui ne permet pas le centrage en mode quirks sur IE (IE5 ne connait pas le doctype switching). On peut passer par un text-align:center pour y remédier mais cela n'a aucun sens de s'en préoccuper dans ce contexte et à l'heure actuelle.

Envoyé par 12monkeys

Ensuite sur le positionnement : tu places tes éléments en float:left et en display:inline, a quoi ça sert ? A rien à mon sens...

ça sert à éviter le double margin bug sur IE6 (dans le cas où un margin du flottant intervient entre l'élément flottant et son conteneur)

Envoyé par 12monkeys

PS : le message d'alerte qui s'ouvre en quittant le site c'est pénible ! Ça va faire fuir les gens...

+1 !

[miss_socrates]

Merci pour la réponse.
Pour les largeurs, le conteneur est un peu plus large car il y a une bordure et
IExplorer rajoute les px des bordures à la div tandis que Firefox pas. J'ai ainsi la même présentation.

Pour le positionnement les éléments ul du menu sont en inline et je les mets en float:left pour ne pas flotter à droite. C'est peut-être superflu mais ça n'a rien à voir avec le décalage de la div me semble-t-il.

@Candygirl: merci pour ton aide.
Je vais essayer ça.

Pour ma cliente, elle dit que toutes ses amies ont le même problème, donc je suppose que toutes utilisent IE 6 ou 7. Elle croit que pour avoir une version plus récente, elle doit acheter un nouveau PC, que IE est couplé à la vente avec Windows. Je crois qu'elle ne fait jamais de mise à jour de logiciel (mais elle se plaint que son internet est super lent)
Je crois qu'elle a bien un XP avec IE 7 qui doit dater de 4 ou 5 ans. Mais bon, elle veut ça et le client est roi, non? (enfin ce que femme veut...)

Pour ce qui est des scrollbars ce n'est valable que pour IE, mais comme ma cliente ne veut pas employer Firefox.... pff les temps sont durs pour tout le monde

[Bisûnûrs]

Pour info, sur mon espace Developpez, ces 30 derniers jours, le pourcentage de visiteurs IE6 est de 1%, et aucune visite IE5.

Sur les sites que je gère qui ont un panel de visiteurs beaucoup moins orientés informatique, IE6 représente 4% et 0 visite toujours pour IE5.

[miss_socrates]

Voilà, j'ai pu corriger dans IE6 et 7 et tout est aligné.
Il reste un petit souci, en IE 6 le menu est plus large que le reste alors que j'ai mis toutes les largeurs identiques à 900 px. Mais ce n'est qu'un détail.

Merci beaucoup à tous pour votre aide précieuse.