[Résolu] Puce image qui disparait sous IE!

Bonjour,
J'ai un probleme d'affichage de puce en background : elle n'apparaissent que si je passe le curseur sur le Li correspondant sous IE.
la permiere puce quant à elle, ne s'affiche pas quoique l'on fasse.
Est ce un bug IE ou une mauvaise gestion des CSS?

CSS

#proch a {
	color:#D10019; 
	font-size: 0.8em;
	line-height: 1.6em}
#proch li {padding-left: 22px; background: url(images/puce_date.gif) no-repeat 5px 6px;}

HTML

<div id="proch">
<h2>Les prochains concerts:</h2>
 <ul>
   <li><a href="9mars.php">Jeudi 9 mars </a></li>
   <li><a href="12mars.php">Jeudi 12 mars</a></li>
   <li><a href="16mars.php">Jeudi 16 mars</a></li>
 </ul>	
</div>

Modifié par Hermann (17 Feb 2006 - 16:34)

Hermann a écrit :
Bonjour,
J'ai un probleme d'affichage de puce en background : elle n'apparaissent que si je passe le curseur sur le Li correspondant sous IE.
la permiere puce quant à elle, ne s'affiche pas quoique l'on fasse.
Est ce un bug IE ou une mauvaise gestion des CSS?

CSS

#proch a {
	color:#D10019; 
	font-size: 0.8em;
	line-height: 1.6em}
#proch li {padding-left: 22px; background: url(images/puce_date.gif) no-repeat 5px 6px;}

HTML

<div id="proch">
<h2>Les prochains concerts:</h2>
 <ul>
   <li><a href="9mars.php">Jeudi 9 mars </a></li>
   <li><a href="12mars.php">Jeudi 12 mars</a></li>
   <li><a href="16mars.php">Jeudi 16 mars</a></li>
 </ul>	
</div>

le probleme ne se pose pas juste avec ce bout de code, pour moi ca marche normalement la

Bizarre moi j'ai le probleme qui apparait dans 2 sites différents.

Bonjour,
Il faudrait plus d'informations que les bouts de code que tu nous montre. Le problème peut venir d'ailleurs, et hors du contexte de ta / tes pages il nous est impossible d'en voir précisément l'origine.
Le mieux serait de nous transmettre les url des pages qui posent problème .
Modifié par Jihel (16 Feb 2006 - 14:06)

Voila un exemple : http://www.onct.mairie-toulouse.fr/tugan_sokhiev.php
voir au niveau des premières questions les puces n'apparaissent pas sous IE.
Modifié par Hermann (17 Feb 2006 - 01:33)

Personne pour m'aider sur ça?

Bonjour,

Pour commencer je compléterais à chaque fois que tu utilises a : les a:link, a:visited, a:hover et a:active (dans cet ordre). Pour être sûr que l'héritage ne joue pas (Avec IE faut se méfier .
Modifié par zzzazzz (17 Feb 2006 - 08:31)

Bonjour,
Merci d'avoir pris la peine de tester Jihel.
En effet ça resout ce problème étrangement mais je ne peux pas enlever la position:relative puisqu'il c'est mon div conteneur qui sert de référence positionnée.
En tous cas comme solution impropable, on pouvait pas trouver pire!
Je suis etonné que personne n'ait manifestement encore jamais rencontré le même problème.
Je vais regarder zzzazz merci.
Modifié par Hermann (17 Feb 2006 - 11:11)

Après un rapide test avec FF (pas le temps, suis au boulot), tu peux supprimer le position:relative à conteneur.
Dans ce cas, seul ton menu_prog bouge. Pour le replacer, tu peux supprimer les instructions

#menu_prog{
position:absolute;
top:96px;
left:0;
...
}

et les remplacer par

#menu_prog{
float:left;
...
}

Devrait pas poser de problème avec IE non plus.
Modifié par Jihel (17 Feb 2006 - 11:23)

@Jihel
Je crois que le problème ne concerne pas le menu.

Merci Jihel mais ce n'est pas une solution très stratégique puisque ce div conteneur je m'en sert pour d'autres éléments et je vais probablement m'en servir par la suite, ce site n'est pas figé. Et puis j'évite le plus possible dorénavant les solution bricolage et les hacks.
Je veux trouver la source exacte du problème.
Modifié par Hermann (17 Feb 2006 - 12:01)

@zzazzz :
oui je sais . Mais le fait de supprimer la position relative introduit un déplacement du menu qui est en absolu et se place donc par rapport au dernier parent positionné. La solution du float permet de replacer le menu correctement.

@ Hermann :
L'élément #conteneur n'a pas besoin d'être positionné dans la mesure où tu joues sur les marges (pour FF) et text-align (pour IE) pour le centrer . C'est donc une indication qui n'apporte rien à ta mise en page et introduit des soucis d'affichage car dans ton cas, #conteneur n'est pas décalé par rapport à sa place originale.

Openweb a écrit :
Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement

Je peux t'assurer que la solution que je te propose est tout ce qu'il y a de plus propre.

Vouloir éviter le bricolage et les hacks est tout à ton honneur. D'ailleurs à ce sujet ton texte contient des caractères non tolérés par l'encodage que tu as choisi (utf-8). Un validateur te permettra de mettre le doigt sur plusieurs soucis dans ton code.
Modifié par Jihel (17 Feb 2006 - 14:17)

Merci Jihel mais ne t'acharne pas! La position relative de mon conteneur dans mon cas et dans la plupart des cas permet de postitionner les élément enfants par rapport a celui-ci et non la fenetre du navigateur, c'est la base et dans ce cas il est très utile, je n'ecris pas de code superflu.
Le élement qui doivent être positionnés en bas de ce conteneur ne peuvent pas l'être avec des marges.
Un des exemple classique de l'utilité de la position:relative :
http://pompage.net/pompe/pieds/

Ciao
Modifié par Hermann (17 Feb 2006 - 14:34)

Bonjour,

En coup de vent (désolé, je manque de temps pour détailler) : la disparition des puces dans IE est un problème courant de haslayout.

Solutions, via une CSS en commentaires conditionnels :
- ul {height: 1%;} ou n'importe quelle autre valeur si le rendu dans IE5.0 est à prendre en compte
- ul {zoom: 1} si on ne s'occupe que de IE5.5-6.0.
- ou toute autre propriété dotant la liste de layout.
Modifié par Laurent Denis (17 Feb 2006 - 15:07)

Ok super! Merci Laurent, je vais regarder ça
Bravo pour cette section (Haslayout) de Blog&Blues sans doute unique en Français et par conséquent précieuse. Sacré boulot!

Pourquoi utiliser la propriété background ? Il serait préférable, a mon avis d'utiliser la propriété list-style-image sur tes balises <li>.

Oui si je pouvais je le ferais mais on ne peut pas faire ce que l'on veut avec les puces images. voir http://openweb.eu.org/articles/puces_images/
Modifié par Hermann (17 Feb 2006 - 17:59)

Bonjour,

Au risque de biaiser la discussion, pourquoi ne pas utiliser la propriété background image sur la balise <a>, plutot que <li> ? Qui ne pose là pas de problème. Ca éviterait les hacks et les commentaires conditionnels. Non ?

Il me semble que les blackgrounds de link génèrent des problèmes
de clignotement au passage du curseur sous IE et puis ce n'est pas utilise puisque je n'ai pas de rollover sur ces puces.
Utiliser une puce en background n'est pas un hack et je n'utilise pas les commentaires conditionnels.
Modifié par Hermann (18 Feb 2006 - 13:53)