CSS box/ul menu

Question

J'ai beaucoup de mal à faire fonctionner mon css correctement. Il semble différent dans les 3 navigateurs que j'utilise (Chrome, IE et FF).

maintenant à la question à la main, j'ai essayé de copier l'exemple de l'adresse suivante: http://www.alistapart.com/articles/taminglists/ Il suffit de faire défiler vers le bas presque jusqu'au fond et recherchez « Dans le monde réel » et un menu bleu.

J'ai mis en œuvre ce menu, mais je ne peux pas obtenir les images personnalisées à travailler (j'utiliser une image personnalisée)

Il fonctionne parfaitement dans Chrome, puis-je obtenir le look que je suis après. Dans IE j'obtiens une marge sur le côté gauche du menu où l'image est située et l'image est dans cette marge? et dans FF, les images se placent au-dessus du texte et créent un drôle de regard (également dans l'espace de marge).

Mon URL est: http://homeweb.mah.se/~M09K0291/123789/Lab7/

J'ai essayé d'ajouter une feuille de style séparée pour IE et enlevé les nouveau rembourrages/marges, mais cela ne fonctionne pas. Je veux la sortie que Chrome produit.

Answer 1

Chaque navigateur a son propre ensemble de paramètres par défaut pour la marge, le remplissage, l'espacement, etc. C'est là que la plupart des différences proviennent de CSS. Considérez using a reset stylesheet pour l'ensemble de votre site. Cela devrait vous donner une base commune que tous les navigateurs devraient reconnaître. Si vous ne voulez pas, ou ne pouvez pas vous permettre de définir un CSS de réinitialisation pour la feuille de style entière, au moins en faire un pour votre menu.

Faire de cette première règle pour votre menu, puis définissez tous les autres styles de menu après celui-ci:

/* This example assumes your menu is contained 
    in a <div /> with an ID of "menu" */ 
div#menu, div#menu ul, #menu li, ul#menu a 
{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
    line-height: 1; 
    list-style: none; 
} 

Cela devrait corriger la plupart de vos problèmes.

Answer 2

Le problème peut provenir de la façon dont les différents navigateurs créent des listes: avec des paddings ou des marges sur les éléments de la liste.

Si vous supprimez la règle liste de style position et donner une marge gauche-32px sur la balise li, vous verrez la coche, au moins dans Firefox, alignés de la manière décrite. L'extension Firebug est une aide précieuse pour diagnostiquer de tels problèmes. Une feuille de style réinitialisée vous aidera également à uniformiser la façon dont les navigateurs traitent les styles (comme une réponse rapide correctement indiquée).