[Résolu] Premier site en CSS: Problème de compatibilité Explorer

Bonjour !
J'en suis à faire mes premiers sites avec des mises-en-page
entièrement en CSS et j'ai de la difficulté à avoir une compatibilité
avec les anciens explorer (5-5.5-6) comparativement aux navigateurs
récents. (j'ai quand même entre 20 et 25% de visiteurs avec Explorer 6 sur mon serveur)

Voici mon prototype:
http://www.miville-deschenes.com/test/test9.php
Le CSS est à l'intérieur du fichier php pour l'instant

Tout semble ok pour les navigateurs récents (Safari, firefox, Explorer 7 et 8) mais
les blocs de textes sont décalés pour les anciens Explorer et les rollovers du menu
ne fonctionnent plus.

Voici deux captures d'écran, la première sous IE7 (ok) et la deuxième sous IE 5.5 avec le décalage:
http://www.miville-deschenes.com/test/browser/IE7.png
http://www.miville-deschenes.com/test/browser/IE55.png

Quelqu'un à une suggestions ?
Modifié par Toto (12 Oct 2008 - 23:57)

Bonsoir et bienvenu sur le Forum.

La compatibilité vers ces navigateurs est-elle une nécessité ou une simple envie ?
Car les récentes statistiques ont d'ores et déjà enterré IE 5 :

w3schools a écrit :
Août 2008 : IE5 => 0.1%

Source

Les statistiques de mon serveur (ou j'ai quelques sites d'hébergés) me disent que:

Août:
Msie 7.0 --> 39.7 %
Msie 6.0 --> 25.1 %

Septembre:
Msie 7.0 --> 42 %
Msie 6.0 --> 23.1 %

Alors c'est presqu'une personne sur 4 ou sur 5 qui utilise encore Explorer 6.
J'aimerais bien les ignorer, mais pour l'instant c'est encore pas mal de monde, malheureusement... (le 5 et 5.5 je peux très bien m'en passer par contre!)
Modifié par Toto (09 Oct 2008 - 22:40)

Toto a écrit :
Alors c'est presqu'une personne sur 4 ou sur 5 qui utilise encore Explorer 6.
J'aimerais bien les ignorer, mais pour l'instant c'est encore pas mal de monde, malheureusement... (le 5 et 5.5 je peux très bien m'en passer par contre!)

A la bonne heure, nous sommes d'accord !

Il n'est pas question de faire l'impasse sur IE6. Mais bien sur les navigateurs plus anciens.
Les correctif pour ce dernier ne sont généralement pas lourd, facilement identifiables et intégrables via les commentaires conditionnels (voir la FAQ à ce sujet).

Quels sont les problèmes rencontrés sous IE6 exactement ?
L'url indiquée précédemment renvoit une erreur 404.
Modifié par Cygnus (09 Oct 2008 - 22:52)

Cygnus a écrit :

Quels sont les problèmes rencontrés sous IE6 exactement ?
L'url indiquée précédemment renvoit une erreur 404.

Je ne comprend pas, je viens de vérifier et les 3 liens postés ci-haut fonctionnent chez-moi

Quelle URL te donne une erreur 404 ? Pour ce qui est du problème, c'est sur IE6 (et 5 et 5.5) le texte est décalé vers la droite d'environs 2-3 cm (le texte est dans des DIV) et ensuite, le menu de navigation ne fonctionne pas et n'a plus aucun rollover

Concernant le texte décalé de 2-3 cm, il s'agit du bug de la double marge (ou doubled margin bug).
Plus d'information dans ce billet : Compatibilité navigateur et prise de tête

Concernant le rollover non fonctionnel, il fonctionne mais sur une très petite partie du lien (balade la souris à la bordure du menu pour le constater). Plutôt que de passer par du javascript, je propose une solution plus simple et plus légère, à savoir le CSS.
Plus d'information dans ce tutoriel : Une image réactive en CSS avec une seule image et sans javascript

Enfin, je ne saurais que trop te conseiller d'externaliser tous les styles CSS présent dans le code html et d'utiliser Firebug (l'extension de firefox) pour nettoyer ta feuille de style de ses instructions inutiles.

Bonne continuation

Cygnus a écrit :
Concernant le texte décalé de 2-3 cm, il s'agit du bug de la double marge

Oui, c'est en plein ça ! Merci beaucoup ! C'est arrangé !

Cygnus a écrit :
Concernant le rollover non fonctionnel, il fonctionne mais sur une très petite partie du lien (balade la souris à la bordure du menu pour le constater).

Ça c'est bizarre... J'ai utilisé un script PHP pour faire afficher la transparence du PNG (pour Explorer 5.5-6) du fond qui fait une ombre portée. Ça marche bien sauf que plus aucun rollover ne marche comme il faut, mais quand j'enlève le PHP, alors les rollover marchent... C'est lui le coupable! (j'avais essayé avec un javascript pour la transparence mais ça ne marchait pas quand c'était une image en background d'un css, mais le PHP lui ça fonctionne dans ce cas)

Bref, pour régler le problème, j'ai utilisé les commentaire conditionnels (merci pour le truc, je ne connaissais pas!) pour remplacer les PNG par des gif sans ombre portée pour les anciens navigateurs et les PNG pour les navigateurs qui sont capable de les lire... Ça semble marcher !!!

http://www.miville-deschenes.com/test/test13.html


Merci de ton aide !

Je rajouterai quand même une couche en conseillant fortement de passer à l'utilisation d'un menu sans javascrip, lorsque ce n'est pas nécessaire... Mais bon, c'est toi qui voit.

A part ça, le sujet est donc à considérer comme [Résolu] ?

Cygnus a écrit :
Je rajouterai quand même une couche en conseillant fortement de passer à l'utilisation d'un menu sans javascrip, lorsque ce n'est pas nécessaire... Mais bon, c'est toi qui voit.

J'aurais bien aimé... J'ai été voir le lien que tu as suggéré. Je n'ai pas vraiment réussi à faire un menu avec sous menu déroulant... Pour de simple boutons ça va, mais pour faire apparaître un sous menu c'est une autre histoire. Si tu connais un exemple ou tutoriel je suis partant. Sinon, je pensais quand même faire des pages de sections offrant les choix du sous menu, au cas ou le javascript ne marcherait pas.