"nombre d'étoiles" CSS bug me rendre fou

Question

J'ai construit une application qui est censée prendre une note d'étoiles. Le mécanisme d'évaluation actuel est fait avec Javascript et CSS.

La fonctionnalité est destinée que vous passez la souris sur les étoiles pour faire votre choix, puis cliquez dessus pour le verrouiller.

Ce que je actuellement can be seen here. Honnêtement, je suis à bout de souffle: tout fonctionne comme je le veux, mais pour une raison quelconque, seuls les quelques pixels de la star fonctionnent avec le survol.

Il doit y avoir un problème d'alignement, mais je ne peux pas pour la vie de comprendre ce que c'est. Je voudrais pouvoir offrir une prime sur celui-ci, il m'a embêté pendant des jours - si quelqu'un a des idées pour où je peux commencer à chercher ce petit bêtise, mais je serais très reconnaissant.

Le CSS pertinent pour le bit de nombre d'étoiles est:

#star ul.star, #star ul.star0 
{ 
    list-style: none; 
    margin: 0 !important; 
    padding: 0 !important; 
    width: 85px; 
    height: 25px; 
    left: 10px; 
    position: relative; 
    float: left; 
    background: url('media/stars.gif') repeat-x; 
    cursor: pointer; 
} 

#star ul.star0 
{ 
    cursor: default; 
} 

#star li { 
    PADDING: 0 !important; 
    MARGIN: 0 !important; 
    FLOAT: left; 
    DISPLAY: block; 
    WIDTH: 85px; 
    HEIGHT: 25px; 
    TEXT-DECORATION: none; 
    text-indent: -9000px; 
    Z-INDEX: 20; 
    POSITION: absolute; 
    PADDING: 0; } 

#star li.curr { 
    font-size: 1px; 
    background: url(media/stars.gif) 0 25px; 
} 
#star div.user { 
    top: 10px !important; 
    left: 15px !important; 
    position: relative; 
    float: left; 
    font-size: 13px; 
    COLOR: #999; 
} 

Answer 1

La première chose que je vois est que la hauteur d'acceptation dans reviewscript.js est

 
    oX<1 || oX>84 || oY<0 || oY>19 

qui me dit que vous » Ne faites attention qu'aux 19 pixels supérieurs. Vous utilisez étoiles comme dans ELU la page que vous avez lié

 
    <ul id="star1" class="star" ... 

Mais style.css, vous affirmez que ces étoiles sont 25 pixels de haut

 
    #star ul.star, #star ul.star0 
    { 
     ... 
    width: 85px; 
    height: 25px; 
     ... 

Vous êtes automatiquement en ignorant MouseOvers sur la quart inférieur de votre image. De plus, compte tenu du comportement des étoiles (dans mon Firefox) où je peux commencer à changer une note d'étoiles et continuer à la changer tout en agitant dans l'espace blanc autour des étoiles, en allant aussi loin que le 0-19. La portée m'amènerait à penser que soit l'image de l'étoile est complétée avec de l'espace blanc en haut, soit le code de dessin d'étoiles attire l'étoile plus bas que prévu.