IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Un div décalé sur IE 6 et 7


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert

    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2011
    Messages
    1 049
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Enseignement

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 049
    Billets dans le blog
    2
    Par défaut Un div décalé sur IE 6 et 7
    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.

  2. #2
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Par défaut
    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 ??

  3. #3
    Membre Expert

    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2011
    Messages
    1 049
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Enseignement

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 049
    Billets dans le blog
    2
    Par défaut Div déplacé
    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.

  4. #4
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Par défaut
    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...

  5. #5
    Membre Expert

    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2011
    Messages
    1 049
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Enseignement

    Informations forums :
    Inscription : Mai 2011
    Messages : 1 049
    Billets dans le blog
    2
    Par défaut
    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

  6. #6
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    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.

  7. #7
    Membre Expert
    Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    Juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 53
    Localisation : Suisse

    Informations forums :
    Inscription : Juillet 2006
    Messages : 1 912
    Par défaut
    Hello,

    Citation Envoyé par miss_socrates Voir le message
    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.
    Citation Envoyé par miss_socrates Voir le message
    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.
    Citation Envoyé par 12monkeys Voir le message
    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)
    Citation Envoyé par 12monkeys Voir le message
    PS : le message d'alerte qui s'ouvre en quittant le site c'est pénible ! Ça va faire fuir les gens...
    +1 !
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et :resolu: si c'est le cas

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher / Cacher Div + Effet sur Texte
    Par HiRoN dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 24/03/2009, 21h26
  2. Onclick sur un div sauf sur les div enfants
    Par Roromix dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 28/02/2009, 18h13
  3. Curseur décalé sur la droite
    Par TotorLeCastor dans le forum MFC
    Réponses: 3
    Dernier message: 04/04/2008, 10h41
  4. Particularité: Superposer un DIV (SWF) sur un DIV (HTML)
    Par paricilas dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 22/06/2007, 18h44
  5. Centrer un tableau avec un DIV float sur la droite
    Par lvr dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 29/01/2007, 15h24

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo