[Résolu] Afficher les list-style-image sous IE

Bonjour à tous, et bonne année (c'est de circonstances) !

J'ai recherché les causes de mon problème un peu partout sur la toile et sur le site/forum d'alsacréation, mais je n'ai pas trouvé de réponse. Alors voilà...

Je suis en train de réaliser un site et j'utilise deux menus. Un pour les langues, l'autre est le menu principal. J'utilise donc la balise <ul></ul> ainsi que <li></li> pour la structure de mes menus.

Voilà le menu des langues :

<ul id="menu_lang">
<li style="list-style-image:url(pics/flag_fr.gif)">Français</li>
<li style="list-style-image:url(pics/flag_en.gif)">English</li>
<li style="list-style-image:url(pics/flag_ger.gif)">Deutsch</li>
<li style="list-style-image:url(pics/flag_ita.gif)">Italiano</li>
</ul>

Je souhaite avoir le drapeau de chaque pays pour chaque langue, j'ai donc mis

style="list-style-image:url(pics/flag_fr.gif)"

à chaque <li>.

Pour mon menu principal, j'utilise cette CSS (l'image est une feuille pour chaque <li>)

#menuG
{
	display:inline;
	text-align:center;
	text-decoration:none;
	width: 710px;
}


#menuG li
{
	list-style-image: url("../pics/feuille.png");
	font-size:12px;
	padding-top:10px;
	width:101px;
	height:20px;
	cursor: pointer;
	text-align: center;
	float: left;
	list-style-position:inside;
}

Sous Firefox, tout fonctionne parfaitement, mais sous IE, pas d'image... Les images apparaissent seulement lorsque je retire le float:left; de mon "menuG li". Bref, en ligne impossible d'avoir les images sous IE, j'ai beau redimensionner le width de mes <li>, l'image n'apparait pas...

Si vous savez d'où cela provient, merci de m'éclaircir !

Amicalement,

Tofffsy
Modifié par Tofffsy (05 Jan 2007 - 17:34)

bonjour,

placé en float:left , les puce ou image sortent du conteneur parent et ne seront pas affichées dans IE.IE applique un padding de 2em par defaut(au lieu d'un margin 2em dans firefoxe , cela evite probablement de provoqué trop souvent le bug de doubles marges dans IE).
Tu peux essayer un position:relative pour remettre en avant plan l'affichage (pas sur que cela suffise sur ce coup la ) , autre soluce , c'est de mettre les puces a l'interieur :

list-style-position:inside;

Ce comportement est normal dans IE .

GC
Modifié par gcyrillus (03 Jan 2007 - 21:29)

Merci de ta réponse, mais cela ne change rien... J'avais déjà essayé le list-style-position: inside;

Quand au positionnement relatif, j'ai essayé, mais rien. J'ai ajouté la propriété dans ma feuille CSS sur le <li> de menuG mais rien, et de plus, il faudrai une position pour chaque <li>, donc je devrais placer mes éléments dans ma feuille HTML ?

Merci de ta réponse et si tu as le temps de me dire ce que tu entends par position: relative; (j'ai essayé mais sur des <li> ca me parait bizarre )

Amicalement,

Tofffsy

oulala !

bonsoir, je dis des aneries parfois , mon dieu !.

En fait sous IE , sitot que tu modifie le comportement d'affichage (display ou float/absolute) tu perds les puces .

La seule option fiable est alors de les repassées en background dans les li en appliquant un padding pour decaller le texte .
(sans oublié de les annuler par un list-style-type:none; ou un display : autre valeur que list-item qui est la valeurs par defaut de li .Pour les autres navigateurs).

Bonsoir et désolé de mon blabla loufoque.

++

Parfait, ça marche !

Merci beaucoup d'avoir pris le temps de m'aider

Amicalement,

Tofffsy

N'oublie pas de passer ton post en résolu.