Internet Explorer refuse de centrer ma page

Bonjour à tous,

Je rencontre aujourd'hui un problème que je n'avais jamais eu jusqu'ici : IE refuse obstinément d'appliquer un simple margin: auto !

Je cherche à centrer un site qui comprend un en-tête, 2 colonnes et un pied de page ; l'ensemble est contenu dans une <div id="page"> pour laquelle j'ai défini le css suivant :

#page {
width: 950px;
margin: 0px auto;
}

Ca marche fort bien dans Firefox, mais pas dans Internet Explorer 7 et, j'ai beau retourner le problème dans tous les sens, je ne trouve pas ce qui cloche

Je n'ai rien trouvé d'équivalent dans le forum ; auriez-vous des pistes à me proposer ?

Merci d'avance pour votre aide.

Hello,

La réponse est ici

mistike a écrit :
La réponse est ici

Et, pour être plus précis, la réponse est probablement dans la partie «n'oubliez pas le Doctype!»

Si la page est affichée en mode Quirks, le centrage avec les marges automatiques ne fonctionnera pas dans IE 6-7-8. Mais personne ne serait assez fou pour travailler en mode Quirks, n'est-ce pas?

Merci pour ta réponse ... qui m'a permis d'avancer de quelques pas ... pour m'embourber un peu plus http://forum.alsacreations.com/smilies/fache.gif (pas réussi à faire fonctionner les smileys)

D'après ce que je comprends de la situation, je pense que le machin passe en mode "quirks" parce que je n'aurais pas une DTD adaptée.

Le problème, c'est que je suis en train de développer un thème perso pour un blog sous Wordpress, et que je fais appel à un tas de modules PHP et à quelques modules Javascript dont je ne maîtrise pas le contenu. J'ai donc tenté de valider sur w3.org le source d'une page (récupéré par Ctrl-U) et le valideur trouve une flopée d'erreurs, à commencer par ce qui se trouve dans les scripts javascript.

Du coup, je ne vois pas bien quelle méthodologie adopter pour savoir comment choisir au mieux ma DTD, et "montrer patte blanche" à Internet Explorer. http://forum.alsacreations.com/smilies/bawling.gif

Vos idées seront dont plus que jamais bienvenues !
Modifié par tosca (29 Dec 2008 - 22:29)

tosca a écrit :
Du coup, je ne vois pas bien quelle méthodologie adopter

Commencer par s'assurer que le code HTML de chaque page commence par un Doctype en bonne et due forme, sans quoi que ce soit avant (code ou commentaires). On peut utiliser comme modèle: http://css.alsacreations.com/outils/squelettor/index.php

Déjà, ça devrait suffire pour travailler en mode Standard et pas Quirks. Un outil comme la barre d'outils Web Developer pour Firefox indique par une icône avec quel mode la page est interprétée par Firefox.

Si besoin, lire les articles qui vont bien sur le mode Quirks et pourquoi c'est pas bien. On les trouvera avec une petite recherche astucieuse (dans les tutoriels par exemple, ou via Google ou autre).

Ensuite:
- ne pas utiliser n'importe quel plugin WordPress;
- ne pas inclure n'importe quel script JS que l'on connait mal;
- placer les scripts JS en externe, pas à l'intérieur des pages HTML (de même pour les CSS, bien sûr);
- ...

Florent V. a écrit :

Commencer par s'assurer que le code HTML de chaque page commence par un Doctype en bonne et due forme, sans quoi que ce soit avant (code ou commentaires). On peut utiliser comme modèle: http://css.alsacreations.com/outils/squelettor/index.php

Déjà, ça devrait suffire pour travailler en mode Standard et pas Quirks.

En l'occurrence, il n'y a qu'une seule structure de page puisque le contenu est généré dynamiquement ; donc le Doctype est assez facile à mettre.
Mais rien ne m'assure que la totalité du code est conformité, puisque je ne sais pas ce que vont générer les différents modules php auxquels je fais appel.

Florent V. a écrit :
Un outil comme la barre d'outils Web Developer pour Firefox indique par une icône avec quel mode la page est interprétée par Firefox.

Web Developer est installé sur mon navigateur, mais je l'utilise très mal car je n'ai pas réussi à trouver de la doc sur toutes ses fonctionnalités ; l'icône en question, notamment, je ne la connais pas ...
Si quelqu'un dispose de liens vers de la documentation ou des astuces Web Developer, je suis preneuse.

Florent V. a écrit :

Si besoin, lire les articles qui vont bien sur le mode Quirks et pourquoi c'est pas bien. On les trouvera avec une petite recherche astucieuse (dans les tutoriels par exemple, ou via Google ou autre).

Sauf erreur de ma part, tout ce que j'ai pu lire sur le sujet concerne le html. Y a-t-il des restrictions relatives au javascript ?

Florent V. a écrit :

Ensuite:
- ne pas utiliser n'importe quel plugin WordPress;
- ne pas inclure n'importe quel script JS que l'on connait mal;

Je fais mon choix en me basant sur les fonctionnalités recherchées, de bonnes critiques utilisateurs, et des mises à jour récentes. Sur quels éléments devrais-me baser pour ne pas les utiliser ?

Florent V. a écrit :

- placer les scripts JS en externe, pas à l'intérieur des pages HTML (de même pour les CSS, bien sûr);
- ...

Le CSS, c'est moi qui l'écrit, et dans un fichier externe.
Pour les scripts JS, j'applique les consignes d'utilisation fournies avec le script ou le plugin. Y a-t-il moyen de faire autre chose ?

En résumé, pour faire des petits développements moi-même avec html, css, mysql et php, je m'en sors sans trop de mal.
Là, il me faut faire de l'intégration à partir de "briques" dont je ne connais pas forcément le contenu, et ça me paraît moins évident de voir ce qui cloche.

Merci pour votre aide.