IE only ! Système de vote. Positionnement. [Résolu : Heyoan]

Bonjour,

J'ai un souci (de positionnement ?) avec mon système de vote 99% CSS.

1/ Il se produit sous IE7. Pas de problème avec Opéra, FireFox, Safari et Konqueror.
Il est visible ici : http://www.essarts-le-roi-tt.fr/Pages/Videos.php

2/ Le principe de base repose sur une image à trois états :
http://www.essarts-le-roi-tt.fr/Images/Decorum/RankStars.gif

3/
- Le top de l'image sert de background à l'ul parent représentant les 5 balles à vide.
- Le center de l'image sert de background au premier li représentant la moyenne actuelle des votes,
- Le bottom de l'image sert de hover lorsque l'on promène son curseur sur la zone.

4/ Le code html :

<ul class="starating">
    <li class="current" style="width [decu]taille fournie en php fonction de la moyenne des votes)></li>
    <li>
        <a title="Nul ! Gaspillage de bande passante" class="star1"
            href="javascript [decu]fonction js qui vérifie l'unicité des votes)">1
        </a>
    </li>
    <li>
        <a title="Bof !" class="star2"
            href="javascript [decu]fonction js qui vérifie l'unicité des votes)">2
        </a>
    </li>
... (idem 3-4-5)...
</ul>

5/ Le code CSS :

.starating{
	list-style:none;
	margin: 0px;
	padding:0px;
	width: 75px;
	height: 16px;
	position: relative;
	overflow:hidden;
	background: url("../Images/Decorum/RankStars.gif") top left repeat-x;}

.starating li{
	padding:0px;
	margin:0px;
	width:15px;
	height:16px;
	float: left;}

.starating li a{
	display:block;
	width:15px;
	height: 16px;
	line-height:16px;
	text-decoration: none;
	text-indent: -9000px;
	z-index: 20;
	position: absolute;
	padding: 0px;
	overflow:hidden;}

.starating li a:hover{
	background: url("../Images/Decorum/RankStars.gif") bottom left;
	z-index: 2;
	left: 0px;
	border:none;}

.starating a.star1{
	left: 0px;}

.starating a.star1:hover{
	width:15px;}

.starating a.star2{
	left:15px;}

.starating a.star2:hover{
	width: 30px;}

... idem... 3-4-5

.starating li.current{
	background: url("../Images/Decorum/RankStars.gif") center left;
	position: absolute;
	height: 16px;
	display: block;
	text-indent: -9000px;
	z-index: 1;}

6/ Le problème ?
Hé bien c'est que sous IE, le valeur moyenne ne s'affiche pas.
Un problème avec mon .starating li.current ci-dessus ?
Modifié par aCOSwt (14 Jun 2008 - 15:44)

Hello aCOSwt ,

je crois me souvenir que IE dans le cas d'un position:absolute; nécessite obligatoirement de lui préciser un left:quelquechose.

Donc je pense que

.starating li.current{
	...
	left: 0px;}

devrait régler le problème.

A+
Modifié par Heyoan (14 Jun 2008 - 15:20)

5 étoiles pour ton conseil Heyoan !
Cela fonctionne impec maintenant !
Deux nuits que je m'arrachais les cheveux dessus...

Merci encore !

salut acoswt,

est ce que (à tout hasard ), tu pourrais indiquer le code JS et PHP qui va avec ton script de Notation stp ?

on ne sait jamais...merci.

Adrien