CSS et Internet Explorer

Version imprimable

25/03/2013, 13h37
mrmaxwell

CSS et Internet Explorer

Bonjour,

Voila quelques jours que je travaille sur l'élaboration d'un site type "vitrine" édité avec notepad++, basé sur un fichier en css, quelques images retouchées via gimp et l'utilisation de 2 élément de jquery : fancybox et nivoslider.

Hier je suis arrivé à obtenir un résultat qui me satisfaisait et j'ai donc voulu faire quelques tests avec les nombreux navigateurs du web.

Firefox opéra safari et chrome m'ont tous rendus un résultat similaire (ormis deux ou trois détails par ci par la) mais lorsque j'ai voulu faire un essai avec internet explorer ce fut le drame.

La mise en page etait mélangé (pas de respect des float...) certaines bordures changées, bref rien d'exploitable.

Je pense avoir été scrupuleux dans mon codage mais je n'arrive pas à trouver sur le web de documentation indiquant comment coder en css pour IE
(quelles recommandations, syntaxe etc ...)

Pourriez vous m'aider s'il vous plait ? D'avance je vous remercie tous
25/03/2013, 13h47
kOrt3x

Tu peux utiliser les hack CSS pour créer un fichier CSS spécialement pour IE.
25/03/2013, 13h47
Bovino

La première des choses, c'est de savoir si tu as bien mit le doctype dans ta page...
25/03/2013, 14h39
Torgar

Ainsi que la version d'IE sur laquelle tu as fait tes tests.
25/03/2013, 16h06
mrmaxwell

compléments d'info

Tout d'abord merci d'avoir répondu si vite :)

A la suite de ce premier test infructueux j'ai essayé de faire mes propres recherches avant de venir vous embêter ;)
Je vous les expose :

j'ai soumis mon fichier d’accueil du site au validator.w3 qui m'a aidé dans le choix du doctype et n'a pas trouvé à redire a part sur des balises fermées un peu vite ( <img /> par exemple )

Pour le doctype j'ai mis <!Doctype html> j'ai lu que cela correspondait a la déclaration du HTML 5 mais a priori pas encore tout a fait validé ( corrigez moi si je me trompe).

J'ai trouvé les différentes infos parlant de hack css : le !important et le commentaire conditionnel qui permet d'appeler une feuille de style différente pour ie . Je pense privilégier cette seconde solution, plus propre dans le codage je pense.

Pour la version d'ie c'est là que cela a été difficile. Tout d'abord je ne dispose pas de beaucoup de machines sous la main pour faire mes tests.
J'ai essuyé un échec d’installation de la dernière version pour cause de manque de service pack1 pour Windows 7 (je suis pas fan des mises a jour microsoft qui alourdissent l'os a mon sens mais c'est pas le sujet)

J'ai donc trouvé un utilitaire censé "émuler" le comportement de ie selon plusieurs versions appelé ietester. Il m'a sorti tellement d' erreurs de scripts en cascade que je me suis dit qu'il valait mieux apprendre a coder css pour ie plutôt que de m'acharner a vouloir corriger un fichier que je ne sais plus par quel bout prendre.

Voila à peu près ce que je peux vous apporter aujourd'hui.
Merci beaucoup de votre patience :)
25/03/2013, 16h17
Bovino

Citation:

corrigez moi si je me trompe

Je te corrige ! :aie:
Le doctype HTML5 est tout à fait valide, c'est uniquement la validation via le W3C qui est encore expérimentale (logique, vu que la spécification n'est pas encore finalisée).

Citation:

J'ai donc trouvé un utilitaire censé "émuler" le comportement de ie selon plusieurs versions appelé ietester.

IETester n'est pas un outil très fiable car il s'appuie sur le moteur de la version d'IE installée sur ton poste.
Regarde par ici pour les tests : Tester ses navigateurs de façon fiable.

Citation:

Il m'a sorti tellement d' erreurs de scripts en cascade que je me suis dit qu'il valait mieux apprendre a coder css

Les erreurs de script correspondent à JavaScript et n'ont rien à voir avec les CSS.
25/03/2013, 17h29
mrmaxwell

mauvaise nouvelle donc...

J'ai lu ... c'est gros ^^

J'ai fermé les yeux sur le passage qui parlait d'ie tester :langue2: et donc si je comprends bien pour pouvoir développer correctement il faudrait une machine (physique ou virtuelle) avec son ie et son système d'exploitation propre a chaque version.

En ce moment on peut pas dire que je fonctionne avec des postes dits "bêtes de courses" voyez...donc ça m'arrange pas trop.

N'étant pas un professionnel du web (on peut rêver mais la encore c'est pas le sujet) la tache me parait compliquée :/.

Il faut que je creuse encore un peu j'imagine.
Merci Bovino je vous tiens au courant.
25/03/2013, 18h19
Candygirl

Le service pack 1 est requis pour l'installation d'IE10. Avec Seven de base tu dois avoir au moins IE9 qui embarque les moteurs d'IE8 et IE7 ce qui devrait te suffire pour te donner une idée du rendu sur les différentes versions d'IE.

Lorsque tu es sur IE9, tu appuie sur F12 et là tu peux choisir les différents moteurs de rendu.
25/03/2013, 22h31
mrmaxwell

Merci

Merci madame ( mademoiselle peut être ? je voudrais pas faire de boulettes :P )

Cela va me permettre de me faire une idée plus précise de l’étendue du travail.

Sinon pour en revenir à mon interrogation de base, n'existe t'il pas de liste même généraliste des instructions css qui posent problème avec internet explorer ?
A moins que cela ne soit des problèmes de syntaxe différente ( des parenthèses, accolades ou guillemets ...)

En tout cas je vous remercie tous chaleureusement, ça fait plaisir de se sentir aidé.
27/03/2013, 13h45
mrmaxwell

re...tour

Bonjour,

j'ai pu faire un petit essai sous ie9 donc je viens faire état des soucis que j'ai rencontrés et clôturer le sujet puisque maintenant je vais devoir résoudre tout ça au cas par cas.

Les commandes qui chez moi doivent être examinées sont:

border-radius
box-shadow
float
margin: auto (dans une classe pour le <body>)

la compatibilité de nivo-slider avec IE.
En tout cas merci de votre aide a tous.

Edit: finalement ce sont des erreurs du a une mauvaise écriture du doctype merci Candygirl
27/03/2013, 14h38
Candygirl

Citation:

Envoyé par mrmaxwell

Les commandes qui chez moi doivent être examinées sont:

border-radius
box-shadow
float
margin: auto (dans une classe pour le <body>)

Tu veux dire quoi par là ? Que le margin:auto ne centre pas ton site sur IE9 ? , ...

Si c'est le cas on dirait bien que ton doctype n'est pas pris en compte. Lorsque tu lances ton site sur IE9, que tu fais F12, sous "mode de document", il affiche quoi ? "quirks" ?
27/03/2013, 17h53
mrmaxwell

Oui

En effet c'est bien quirks qui s'affiche : c'est grave ?

Cela dit j'ai pu rectifier le "bug" (j'ai pas d'autre mots") en ajoutant text-align:center .

C'est un peu bête parce que ça ne me semblait pas justifié vu que c'est plutôt le centrage de la div globale contenant le site qui doit être rectifié.

pour rappel j'ai <! DOCTYPE HTML> en tête de site. Peut être une autre particularité.

Edit: Quelque réponses au cas où quelqu'un serait dans le besoin

Tant que j'y suis pour le float incohérents il semble que les marges (margin-left...) soient interprétées différemment dans IE, elles seraient doublées.
En les réduisant ça à résolu mon problème, j'ai plus qu' à l'écrire en exception pour IE.
27/03/2013, 19h12
Candygirl

Oui, c'est grave. Mais ça se soigne ;p

Surtout tu arrêtes de suite avec tes correctifs; tu les supprimes, ils sont inutiles.
Le seul vrai problème est de déterminer pourquoi IE passe en mode quirks, la source de tes problèmes.

Plusieurs raisons possibles:

- Ton doctype est incorrectement renseigné (genre tu as mis un espace entre le <! et de Doctype, cf plus bas )
- Tu as encodé en utf-8 avec BOM
- Tu as mis qqch avant le doctype

Si tu ne trouves pas, l'idéal est de donner un lien vers ton site en ligne ou, au pire, copie/colle ici le tout début du code de ta page (-> <head>)

EDIT:

Citation:

Envoyé par mrmaxwell

<! DOCTYPE HTML>

C'est <!DOCTYPE html> sans espace entre le ! et le doctype la syntaxe correcte ...