28221 sujets

CSS et mise en forme, CSS3

Decalage différent, iexplorer et firefox (listes)

en mettant en style :
list-style-type:none;padding-left:10px

j'ai un decalage différent entre ie et firefox.
Bien sur celui de firefox me convient, donc savez vous comment faire pour que les deux affichent pareil ?
Avec ça :

#tonconteneur {
 list-style-type:none;
 padding-left:5px; /*taille pour ie*/
}
/* code non compris par ie */
html>body #tonconteneur {
 list-style-type:none;
 padding-left:10px;
}

Tu vas pouvoir spécifier deux tailles différentes, une pour ie et l'autre pour ff.
Modifié le 11 Jan 2005 - 16:16
Bonjour,
Dans la méthodologie mise en post-it de ce salon, il y a un lien vers un billet qui permet d'isoler les problèmes, dans la partie Suppression de toutes les marges tu trouveras le moyen de partir de zéro pour tes marges. C'est souvent très utile en manipulant les listes, car différents navigateurs n'utilisent pas la même propriété pour créer l'indentation des éléments de listes, d'où des différences suivant tel ou tel navigateur graphique.
Mozilla, Firefox et Cie utilise un padding left sur ul, et IE et Opera un margin letf sur ul.
En partant de 0, tu peux spécifier tes marges et avoir un résultat identique sur différents navigateurs.
Modifié le 11 Jan 2005 - 16:31
littlesam a écrit :
Avec ça :

#tonconteneur {
 list-style-type:none;
 padding-left:5px; /*taille pour ie*/
}
/* code non compris par ie */
html>body #tonconteneur {
 list-style-type:none;
 padding-left:10px;
}

Tu vas pouvoir spécifier deux tailles différentes, une pour ie et l'autre pour ff.

L'utilisation d'un hack pour l'indentation de listes est à mon avis plus que douteuse.
Administrateur
Je suis d'accord avec Stephan et FlorentG, je n'utiliserais de hack qu'en dernier recours...

Dans http://www.alsacreations.com/articles/compatibilite/ :
a écrit :
Pour contourner ce problème, plusieurs solutions sont envisageables :

* Il faut éviter de donner un "width" à un élément qui possède des padding latéraux (gauche/droite) ou des bordures latérales. Préférer donner des margin externes à cet élément.
* Il faut éviter de donner un "height" à un élément qui possède des padding verticaux (haut/bas) ou des bordures verticales. Préférer donner des margin externes à cet élément.
Par exemple, votre div doit faire 15em de large et vous voulez lui attribuer un espace interne (padding-right) de 2em à droite. Ceci va poser des problèmes de modèle de boite. Evitez le padding et attribuez un margin-right au contenu de ce bloc (paragraphes, autres div, etc.)... ou alors gardez le padding, mais ne donnez pas de largeur au div conteneur (vous pouvez délimiter sa taille en le limitant par des marges) !
Pour information, si vous aviez besoin d'un padding-top ou bottom, cela n'aurait pas posé de problème de dimensions... sauf si vous aviez attribué une hauteur à votre bloc div.
* il est possible d'utiliser des hacks (bidouilles) pour feinter IE
Parfois ça merde complet même avec des padding et margin spécifiés, sans le reste du code je suis partie du principe que c'était un problème de ce genre et pas juste quelqu'un qui ne savait pas mettre margin: 0px. Mais bon j'ai p-e mal compris...
Sujet clos
Aller à