[Résolu]Besoin d'aide avec mise en forme d'un unordered list ul,li

Bonjour,
mon problème est le suivant : je n'arrive pas à obtenir le même padding-left sous Firefox 3 et IE7 entre mes puces (des images) et le texte. J'ai essayé toutes les combinaisons possibles pour ces deux attributs bordéliques que sont (pour moi du moins) ul et li, rien à faire... donc en désespoir de cause, je poste le code concerné ici et si quelqu'un arrive à m'éclaircir là dessus je lui en serais grandement reconnaissant.

La div .block est inclu dans la div #rightcolumn (il s'agit d'une sidebar sous wordpress)

code HTML :

<div class="block">
<h1>Archives</h1>
<ul>
<li><a href='http://www.mtlcafe.com/2008/09/' title='septembre 2008'>septembre 2008</a></li>
<li><a href='http://www.mtlcafe.com/2008/08/' title='août 2008'>août 2008</a></li>
</ul>
</div>

Code CSS:

#rightcolumn{
float: left;
width: 235px; /*Width of right column*/
margin-left: -235px; /*Set left margin to -(RightColumnWidth) */
padding-bottom: 50px;
background: url('img/ccup_reg.jpg') no-repeat top;
}

#rightcolumn .block {
width:205px;
line-height: 19px;
color:#FFFFFF;
overflow:hidden;
padding:15px;
}

#rightcolumn .block li { 
background: url(img/arrow.gif) no-repeat 2px 8px; 
padding-left: 12px;
}

Vous pouvez admirer le rendu actuel sur www.mtlcafe.com.
Merci d'avance,
Amau96
Modifié par amau96 (16 Sep 2008 - 21:07)

Salut,

Même avec les commentaires conditionnels ?

Non car le problème ne vient pas de la structure html (classique

<ul> <li></li>...</ul>

) mais de la mise en forme css et je préférerai ne pas avoir à utiliser un IE hack car je sais que c'est possible d'avoir des listes propres sous IE7 et FF3 sans avoir à passer par là.

Bonjour,

Euhm...
Est-ce que ce ne serait pas parce que tu n'as pas réinitialisé les marges des éléments <ul> et <li> ?

Comme la FAQ l'explique si bien :

a écrit :
Quand on modifie uniquement soit la marge, soit le remplissage d'une liste, on se retrouve donc avec un résultat différent selon les navigateurs. Pour y remédier, il suffit de toujours spécifier à la fois les valeurs de margin et de padding pour les éléments ul et ol, en mettant l'un des deux à zéro et l'autre à la valeur d'espacement souhaitée.

En somme, ceci ne règlerait-il pas ton problème :

.block ul {
margin : 0;
padding :0;
}

#rightcolumn .block li { 
margin :0;
padding : 0 0 0 12px;
background: url(img/arrow.gif) no-repeat 2px 8px; 
}

Oui bah non, ca faisait partit des trucs que j'avais testé et voyant que ca ne changeait strictement rien au fait que IE7 rajoute un padding-left de 12px supplémentaire (donc 24px au total) sans raison évidente, je l'avais viré. Il semblerait que la cause du problème soit plus profonde ... mais je laisse quand même les margin et padding à 0 pour le ul et li pour que vous voyez que le problème est toujours présent.
Modifié par amau96 (15 Sep 2008 - 17:18)

amau96 a écrit :
IE7 rajoute un padding-left de 12px supplémentaire (donc 24px au total) sans raison évidente

Ce ne serait pas par hasard le bug de la double marge ?

Le bug de la double marge n'est-il pas spécifique à IE6 ? Je n'essaye même pas de rendre mon blog compatible sous ce dernier, uniquement sous IE7, et pour faire mes listes qui déconnent, je me suis inspiré d'un thème wordpress déjà fait (http://wp-themes.com/devart/), et sur ce dernier elles passent parfaitement à la fois sous IE7 et FF, j'ai analysé son code ligne par ligne et je ne comprend pas pourquoi quand je l'incorpore dans mon thème ça se comporte différemment, quelque chose m'échappe et je vois pas quoi...
Modifié par amau96 (15 Sep 2008 - 17:54)

Cygnus a écrit :
Ce ne serait pas par hasard le bug de la double marge ?

Pas avec IE7 (bug corrigé), éventuellement avec IE6.

Ceci dit, c'est le padding-left de 12px qui a l'air doublé, et d'après les styles appliqués à l'élément (visualisés sous IE7 avec la Debugbar), ça n'est pas normal. Donc je dirais qu'il s'agit d'un Doubled Padding Bug (jamais entendu parler…). Peut-être un problème de hasLayout?

À tester: appliquer un zoom: 1 aux LI concernés ou à leur parent (élément UL).

Je crois aussi qu'il m'est arrivé de spécifier un padding différent (la moitié ou le double du padding normal, suivant les cas) pour IE6/7, dans une feuille de correctifs CSS pour IE 6 et 7, sans trouver de correctif simple pour obtenir le bon rendu autrement qu'avec des valeurs spécifiques.
Modifié par Florent V. (15 Sep 2008 - 18:07)

bonjour,

ce n'est pas vraiment un bug mais une interpretation differente , c'est juste que l'emplacement d'une puce même declaré en 'none' reste reservé.

ul li, ol li { list-style: none; list-style-position: inside;}

le "list-style-position: inside; " est le responsable de ce 'decallage' supplementaire dans IE7.

merci de ta réponse mais peux tu m'expliquer alors pourquoi sur ce site http://wp-themes.com/devart/, qui a aussi la propriété

ul li, ol li {
list-style-image:none;
list-style-position:inside;
list-style-type:none;
}

il n'y a pas de décalage supplémentaire sous IE7 ?
Modifié par amau96 (16 Sep 2008 - 21:02)

En tout cas ça marche maintenant, j'arrive pas à croire que c'était à cause de cette instruction, quand je repense aux nombres d'heures que j'ai passé à étudier comment les ul et li fonctionnaient... merci bcp.

comme l'evoque florent , verifié ou force le layout sur un element de ta page a l'aide de zoom:1; peut debusqué la raison d'un comportement inattendu , mais pas forcement sur l'element lui même , l'un de ses parents .

Tu as mis ta page a jour , mais il me semble bien que la difference resider sur ce layout activé dans le theme de wordpress (conteneur colonne menu) et pas dans ta page .

une dimension ou un float , suffit a activer ce layout par exemple .

Juste pour ma culture, je n'étais pas du tout conscient de cette propriété "hasLayout" à quoi sert-elle ? du coup je n'arrive pas à comprendre l'intérêt de l'activer avec le zoom:1 (j'ai essayé zoom:1; sur ma feuille CSS je n'ai vu aucune différence...)

Hello,

à lire dans la FAQ : Qu'est-ce que le HasLayout, et comment l'utiliser ?

re ,

oups , envoi sur une fausse piste dans ton cas c'est :
#rightcolumnhead qui est denué de "haslayout" et ne semble avoir aucune incidence.

Cependant , avoir quelques notions sur ce qu'est le haslayout dans IE ne peut que te faire du bien .

En regardant a nouveau ces 2 pages , on perçoit bien cette difference, ce decallage sur les liste avec la regle none et inside.

Tu peut donc , a mon avis , considéré cette difference comme une particularité de IE7

bonsoir.