LI / CSS / Comportements différents sous IE et Firefox

Salut à tous,

Je travaille sur la mise en forme de mon blog (http://blog-this-way.blogspot.com/).

Je viens de mettre en ligne ma nouvelle mise en forme. Tout semble fonctionner correctement sous Firefox.

Cependant, sous IE, je rencontre divers problémes :
- Menu de droite : les images utilisées comme puces n'apparaissent pas systématiquement. De plus, la première puce n'apparaît jamais !
- Le fond de couleur disparait sur les a: hover de temps en temps.
- Enfin, quelque chose qui vous concerne mois, IE ne semble pas interpréter la transparence des images PNG ?!

Voilà. Si vous pouviez m'éclairer. J'ai fait différents tests mais ça ne semble pas marcher. Je ne vois pas d'où vient le problème : du UL, du LI, du a: hover !!

Merci d'avance.
Yahn

Bonjour,

je n'ai pas regardé ta page dans le détail, mais il faut savoir que les valeurs par défaut des padding et margin sont différentes entre IE et FF en particulier sur les éléments li et ul.

Par ailleurs certains éléments (ul et li par exemple) peuvent induire des comportements énervant s'ils ne sont pas dotés de la propriété HasLayout (notion propriétaire Microsoft). Un bon récapitulatif : http://test.blog-and-blues.org/haslayout/

Pour la transparence tu as vu juste, IE ne sait pas l'exploiter dans les PNG. Il existe des contournements à base de scripts ( par exemple IE7) ou propriétaire propriétaires Microsoft.

Ok merci. Je vais regarder tout cela. Mais, ça m'a l'air bien compliqué. Si vous avez déjà eu ce type de problème, vos retours sont les bienvenus. Merci d'avance.

Yann

Bon j'ai remplacé mes images png par des gif. ça c'était facile. Par contre, je reste bloqué sur mes ul et mes li qui s'affichent pas mal dans IE. J'ai essayé différents trucs sans succés. Pas facile.

Salut,

avant de régler les probèmes de différence du rendus suivant les navigateurs, il vaudrait mieux que tu mettes un doctype à tes documents.

OK, je viens de renseigner le DOCTYPE.

D'autre part, j'ai résolu le probléme sur la rubrique "Sur la Platine" à droite.

Pour cela, j'ai imbriqué deux div l'un dans l'autre.
Au premier div, j'affecte mon image du haut qui fait les arrondis du haut.
Au deuxième div, j'affecte mon image du bas qui fait les arrondis du bas.

J'ai renseigné pour l'id des uls une marge à gauche.
De plus, j'ai utilisé un position: relative sur les li.

Enfin, ça a l'air de fonctionner dans FF et IE6. C'est du bricolage. Je ne sais pas vraiment lequel des trois éléments a résolu mon probléme. Mais, ça marche.