[CSS] : Probleme de decalage sous opera (ok avec IE et FF)

Bonjour à toutes et à tous,

Je profite de mon premier message de l'année pour souhaiter les meilleurs voeux au wristes pour l'année 2006.

Ceci dit, je rencontre un petit soucis de compatibilité sur le site que je developpe en ce moment.
J'ai rendu compatible l'affichage entre FF et IE via quelques hacks css. Cependant je constate un comportement encore différent sous opera :

http://www.photomontages.org/photomontage.gif

code du css pour la partie concernée :

ul { list-style-type : square; color:#009900; list-style-position : outside; }
......
#exemple ul { margin-left: -25px;}
* html #exemple ul {	margin-left: 15px;}

voici l'adresse du site en question : www.photomontages.org si vous souhaitez voir la feuille de style complete.

Avez-vous une solution pour resoudre ce cas de figure sous Opera ?
Modifié par oli004 (02 Jan 2006 - 19:50)

Bonsoir

Voir la FAQ du forum

Merci pour ton information @Laurent toutefois elle ne m'a pas trop aidé car en fait, j'avais 3 comportements différents selon que ce soit sous IE, FF ou Opera.

J'ai tout de même resolu mon probleme, en simplifiant mon css.

J'ai supprimé <ul> et <li> au profit d'un habillage de mes lien ainsi :

#exemple a {
display:list-item;
list-style-type : square; 
list-style-position:inside;
}

Et là, plus de soucis de compatibilité
Modifié par oli004 (03 Jan 2006 - 01:19)

Bonjour,

Le lien ci-dessus te permettait de résoudre le problème sans avoir à supprimer la liste <ul>, les 3 comportements ayant bien la même origine. Dans ton cas, c'est le recours malavisé au hack * html au lieu de gérer correctement padding et margin par défaut qui provoquait le bug d'Opera :
- Firefox : 40px de padding-left par défaut compensé par - 25px de margin = 15px d'espace à gauche de la liste
- Internet Explorer: 40px de margin-left par défaut remplacé par 15 px de margin via le hack = également 15 px à gauche de la liste
- Opera: 40px de margin-left par défaut remplacé par le -25px de margin = moins 25px d'espace à gauche de la liste.

Opera utilise la même valeur par défaut qu'IE (margin-left) mais ignore le hack qui corrige celle-ci pour IE.

Cela dit : ne pas utiliser ces hacks. Celui-ci ne sera d'ailleurs plus supporté par IE7... qui continuera très certainement à appliquer par exemple une marge gauche par défaut aux listes, et à reproduire certains comportements d'IE6. Comme l'ensemble de ta mise en page repose sur l'emploi intensif de ce hack, elle court sans doute de gros risques d'incompatibilité avec cette prochaine version d'IE.



Sinon, une remarque: il est inutile de redéfinir toutes les propriétés inchangées comme tu le fais dans les hacks IE. Il suffit de redéfinir uniquement la propriété concernée.

Enfin :

a écrit :

Je profite de mon premier message de l'année pour souhaiter les meilleurs voeux au wristes pour l'année 2006.

ça s'appelle un voeu copié-collé, ça...
Modifié par Laurent Denis (03 Jan 2006 - 05:53)

Merci Laurent Denis pour ta réponse claire et précise. Effectivement je sens que je vais rencontrer des problèmes lors du passage à IE7 et je corrigerai certainement le css dans les prochains jours, ne serait-ce que pour enlever le superflu.
pour le moment, je m'axe surtout au contenu du site. Sachant que la modification du css ne seras pour ainsi dire invisible à l'internaute, je préfère remetre ça à un tout petit peu plus tard (j'ai pas di que je ne le ferai pas hein )

Autant pour moi, voir le message suivant ...
Modifié par chmel (19 Jan 2006 - 02:25)

Bonjour,

oli004 a écrit :
J'ai supprimé <ul> et <li> au profit d'un habillage de mes lien ainsi :

#exemple a {
display:list-item;
list-style-type : square; 
list-style-position:inside;
}

Et là, plus de soucis de compatibilité

Mais peut-être d'accessibilité