28173 sujets

CSS et mise en forme, CSS3

Bonsoir,

J'ai un pb avec IE6 avec une liste dont les puces ont été redéfinies via la propriété background et une image flottante. Les contenus de la liste sont effectivement poussés mais pas les puces...

Voici le code HTML

<img class="gauche" src="..."/>
<ul>
    <li>Elt1</li>
    <li>...</li>
</ul>


et les CSS
#contenu ul {
    list-style-type: none;
    margin: 0 0 10px 0;
    padding: 0;
}

#contenu li {
    background: url('../img/puce8.gif') no-repeat 0 4px;
    padding-left: 13px;
    line-height: 15px;
}


Si vous voyez quelque-chose...
Bonjour,

Tu n'indiques pas les règles CSS associées à img class="gauche".

1) As-tu associé la règle display: block; à cette image?

2) Autre piste, force la propriété "haslayout" à "true" en introduisant, par exemple, la règle: "zoom: 1;" soit sur ul, soit sur li, soit sur les 2.

@mitiés
.gauche {
    float: left;
    margin-right: 10px;
}


Il me semble que img n'accèpte pas la propriété display:block...

En revanche, j'ai mis zoom: 1; dans ul et ça tourne...

Merci phdm !
a écrit :
Il me semble que img n'accèpte pas la propriété display:block...

Bien sûr que si. Certaines différences d'affichage peuvent être liées à une différence de la valeur par défaut donnée par différents navigateurs à la propriété display (block ou en ligne) de "img".

a écrit :
En revanche, j'ai mis zoom: 1; dans ul et ça tourne...

cette histoire de "haslayout" est souvent incontournable pour IE.

@mitiés

Philippe