Indentation d'une liste sous IE7 [Résolu/Fermé]

Signaler
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
-
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
-
Bonjour,

dans le cadre d'un projet xhtml 1.0 strict, je dois faire une list (ul) avec, à la place des puces, une image (12x16)...

Il existe bien sur différentes manières d'y parvenir :
- image à la place de la puce avec ul { list-style:none url(image.gif) inside; }
- image en fond des balises li avec background:url(image.gif) 0 0 no-repeat;
- ou encore l'utilisation d'une liste sans puces avec l'image dans le contenu de la balise li (<li><img src="image.gif" width="12" height="16" /> texte sur plusieurs ligne</li>

Mon problème vient du fait que, quoi que je choisisse comme solution, il y a toujours un décalage de l'indentation entre IE7 et les autres browser.

Il semble que IE7 n'en a rien à faire des margin:0; et padding:0; !


Voici l'html en question :
<div id="three_col">
  <div class="col" style="border-left:0;">
    <img src="styles/Title_What'sNew_2.jpg" width="254" height="130" />
    <ul>
      <li>
        <strong>texte</strong>
        <br />
        <a href="#">More...</a>
        <br />
        <br />
      </li>
      <li>
        <strong>texte</strong>
        <br />
        <a href="#">More...</a>
        <br />
        <br />
      </li>
    </ul>
  </div>
  <div class="col">*contenu similaire ici*</div>
  <div class="col">*contenu similaire ici*</div>
</div>


et le CSS :
#three_col { margin-left:-10px; width:768px; border-top:2px dotted #d9d9d9; }
#three_col .col { float:left; width:254px; border-left:2px dotted #d9d9d9; }
#three_col .col ul {
  margin:0 auto;
  padding:0;
  list-style:none url(image.gif) inside;
  font:normal 11px/13px Verdana, Helvetica, Arial, sans-serif; text-align:left;
}
#three_col .col ul li { padding:3px 0 10px 0; }


Voilà j'espère que vous pourrez m'aider parce que je sèche depuis plusieurs heures !

4 réponses

Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
104
Et bien j'ai trouver ma solution ...dans les hack css !

Pour info, voici ce que donne le code : (attention, l'image ne fait plus 12x16 mais 11x13 ^^)
HTML inchangé.

CSS:
#three_col { margin-left:-10px; width:768px; border-top:2px dotted #d9d9d9; }
#three_col .col { float:left; width:254px; height:100%; border-left:2px dotted #d9d9d9; }
#three_col .col ul {
  margin:0;
  padding:10px 15px;
  list-style:none;
  font:normal 11px/13px Verdana, Helvetica, Arial, sans-serif;
}
#three_col .col ul li { 
  margin:0;
  padding:0;
  background:url(drop.gif) 0 0 no-repeat;
  text-indent:11px;
  .text-indent:-2px;
  _text-indent:-2px;
}


Et voici les liens vers les articles concernant les hacks css :
http://esprit-creatif.blog.mongenie.com/index.php?idblogp=406297 -- en français
http://www.solidstategroup.com/page/1592 -- en anglais


Un grand merci à toi M@dien pour avoir tenté de m'aider ! ;)

A une prochaine ! ^^
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Ha la grande joie des listes avec IE...
change le margin du <ul> à "0px" au lieu de "0px auto". pour moi ça enlève la marge à gauche créé par IE8 (j'ai plus IE7).

Pour la position de la puce il y aura toujours une différence entre les navigateurs. Le mieux pour avoir un placement au pixel près est de passer par un background au lieu du list-style.


NB: Le margin:auto; ne sert pas dans un cas où les balises blocs ne sont pas limitées en largeur.
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
104
Ah ! Je n'avais pas pensé au auto !
Je vais essayer ça très prochainement !

Et pour expliquer le foutoir dans le css... je suis "sensé" repartir d'un site déjà fait...
... ...d'où la zone sans cheveux à gauche près de mon oreille ! :P
...pas facile de passer "dans" un projet de qqun d'autre !

Je posterais demain, après avoir essayé !


Merci !
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
104
Bonjour,

et bien non, la suppression du margin auto ne change rien...

Pour solutionner rapidement mon problème, j'ai décidé de garder mes ul mais de supprimer mes li ^^
Et la puce est une img ! ...le W3C crie et pleure quand je tente la validation... :P

Il n'empêche... si quelqu'un à une idée pour résoudre ce casse tête... ?

Pour expliquer encore un peu :
le texte placé dans mes <li> est sur plusieurs lignes et ce n'est que la première qui est "décalée" sous IE6 & 7 (je n'ai pas testé sous mac...)

Le truc c'est que j'aimerais que ça fasse ça sur tous les browser ou alors que ça ne le fasse pas du tout !
Or, si j'applique une marge ou une indentation "moi-même"... elle se rajoute à celle présente sous IE6/7 ...et mon problème reste le même !

Une idée ?