28173 sujets

CSS et mise en forme, CSS3

Bonsoir bonsoir

Voici un petit probleme de compatibilité, surement moindre, mais je n'ai plus vmt le tps de passer du temps à chercher la solution, alors je fais appel aux nombreux cerveaux de ce forum...

Le probleme est simple : sur ce site: www.skr-creation.com , les puces du menu en haut ne s'affichent pas sous IE.

Voici le code (simplifié) :

HTML :

<ul>                                                           
    <li class="listeneutre"><a href="index.php" title="Accueil" >Home</a></li>
    <li><a href="index.php/item/70" title="SKR Création">SKR Création</a></li>
    <li><a href="index.php/item/71" title="SKR Création" >Services</a></li>
    <li><a href="index.php/module/formcontact" title="Contact" >Contact</a></li>
    <li><a href="index.php/item/72" title="Infos légales">Infos légales</a></li>          
 </ul>


et CSS :

ul{  
  padding-left:45px;
  padding-top:0px;
  font-size:12px;
}

ul li{ 
  list-style-image: url(../images/puce.gif);  
  float:left;
  padding:12px;
  padding-right:49px;
  padding-left:35px;     
}


Les puces réapparaissent sous IE lorsque j'enleve 'float:left', mais elles ne sont plus horizontales.

Merci de vos réponses !
Modifié par skarapace73 (26 Sep 2006 - 01:23)
Bonjour,

Tu as essayé de remplacer ca :


ul li{ 
...
float:left; 
...
}



Par ca :


ul li{ 
...
display:inline;
}



Sur un malentendu qui sait ....

Vianon
Tout simplement, car la propriété list-style-image que tu as utilisée n'est pas au bon endroit.

li est un élément de puce qui s'utilise pour les ul et ol à la fois, or si tu mets un ol avec un li qui a une propriété de list-style-image, ça ne fonctionnera pas.

Donc il faut attribuer cette propriété à ta balise ul ^^.
Ce qui donne donc :

ul
{
    list-style-image: url("images/puce.gif");
}


Voilou =D

[EDIT] sur ton code, tu ne mets pas les guillemets, ils ne sont pas indispensables, mais bon, il vaut mieux les mettre, c'est plus "propre" ^^
Modifié par Jangkun (27 Sep 2006 - 13:04)
Vianon : en remplaceant float:left; par display:inline; mes puces disparraissent Smiley ohwell

Jangkun : merci bcp, mais cela ne change rien de mettre le list-style-image sur le ul. Ceci dit je le laisse quand meme ici, car tu a raison pour les ul/ol.

Une autre idée?