liste couleur de fond vissé dans IE7

J'ai Styled des listes à puces HTML et leur cap pour ressembler à ceci dans Firefox:liste couleur de fond vissé dans IE7

alt text http://img24.imageshack.us/img24/711/screenshot001nij.png

Malheureusement, dans IE7, ils ressemblent à ceci:

alt text http://img11.imageshack.us/img11/8343/screenshot002e.png

Le code HTML est pertinent

<div class="list-column"> 
    <h4>Types de pêche</h4> 
    <ul> 
     <li>Pêche en lac</li> 
     <li>Pêche en Rivière</li> 
    </ul> 
</div>

Et le CSS est:

.list-column { 
    float: left; 
    margin-right: 20px; 
    width: 20em; 
} 

div.list-column h4 { 
    background-color: #FDD041; 
    padding: 5px !important; 
} 

ul li { 
    background-image: url(images/arrow.gif); 
    background-position: 0 11px; 
    background-repeat: no-repeat; 
    list-style-image: none; 
    list-style-position: outside; 
    list-style-type: none; 
    margin-bottom: 6px; 
    margin-left: -20px; 
    margin-top: 2px; 
    padding: 2px 0 2px 18px; 
}

Je soupçonne que le fait que la div contenant la liste est flottante à gauche est probablement la racine de mes problèmes, mais je ne suis pas sûr de savoir comment contourner le mauvais affichage dans IE7?

Mise à jour: J'ai essayé d'ajouter un « zoom: 1 » propriété aux éléments « ul » pour voir si les donner de la disposition «éléments fixerait le problème dans IE, mais il ne l'a pas.

Le problème n'est certainement pas lié aux angles arrondis. Je les ai désactivés temporairement mais ça n'a rien changé dans IE (mis à part l'aspect des coins).

Merci, Don

Source

2009-03-22 Dónal

Ce ne suffit pas de CSS pour reproduire l'effet. –

J'ai ajouté un peu plus de CSS.Les coins arrondis sont produites par JavaScript, et ne sont pas pertinentes pour le problème d'affichage –

nous ne pouvons pas vraiment être sûr si les coins arrondis ne jouent pas mal dans IE-7 ou non –

IE et les autres navigateurs ont une feuille de style par défaut différente.

IE indente la liste des éléments en plaçant un 'margin-left' sur le < ul>. Les autres navigateurs mettent un 'padding-left' sur le < ul>. Donc, si vous voulez avoir la même apparence dans tous les navigateurs, placez 'margin-left' et 'padding-left' explicitement sur < ul>. Dans votre cas, vous voudriez ajouter quelque chose comme "margin: 0; padding: 24px "sur votre" div.list-column ul, ul.round "règle.

(La liste par défaut « marge gauche » dans IE est, pour être précis, « 30pt ».)

Source

2009-03-22 23:30:31 bobince

C'est l'idée que j'avais. Je n'étais pas exactement sûr que c'était le problème, parce que je ne pouvais pas reproduire la sortie pour une raison quelconque. – strager

Merci, j'ai suivi votre conseil et ça marche bien maintenant. J'aurais vraiment aimé savoir à propos des feuilles de style reset quand j'ai commencé ce site. –

Une solution courante pour ce met la largeur de l'élément. Cela fera tout IE dans les limites de cette largeur.

Source

2009-03-22 22:28:37 KdgDev

Je pense que c'est un cas de IE-7 auto indendant le li le moyen le plus facile de déboguer c'est d'installer IE-8; passer en mode compatible ie-7. puis lancer les outils de développement dans le menu Outils

Vous pouvez ensuite inspecter les éléments individuels et vérifier s'il y a caché rembourrage ou les marges étant appliqué

Source

2009-03-22 22:29:22

Je pense que cela peut dépendre de différents remplissage par défaut sur IE et Firefox . Essayez d'utiliser reset.css dans votre code si vous ne l'avez pas déjà fait.

P.s. dans ie8 vous avez des outils de développement qui sont similaires à firebug. Essayez de les utiliser et de voir si vous ne pouvez pas comprendre le problème ...

Source

2009-03-22 22:39:26 Alekc

liste couleur de fond vissé dans IE7

Répondre

Questions connexes