"star rating" CSS bug driving me mad

Question

I have built an application which is meant to take a star rating. The actual rating mechanism is done with Javascript and CSS.

The intended functionality is that you hover over the stars to make your selection, and then click on it to lock it in.

What I have at present can be seen here. Honestly, I'm at my wit's end: Everything is working as I want it to, but for some reason only the top few pixels of the star works with the hover-over.

There must be an alignment issue, but I can't for the life of me figure out what it is.

I wish I could offer a bounty on this one, it has been bugging me for days - if anyone has any ideas for where I can begin to look for this silly little but, I'd be most grateful.

The relevant CSS for the star ratings bit is:

#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

The first thing I see is that the acceptance height for in reviewscript.js is

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

which tells me that you're only paying attention to the upper 19 pixels. You're using stars as uls in the page you linked

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

But in style.css, you assert that these stars are 25 pixels high

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

So automatically you're ignoring mouseovers on the lower quarter of your image.

Also, given the behaviour of the stars (in my Firefox) where I can start changing a stars rating and continue changing it while waving around in the white space about the stars, going about as far vertically as the 0-19 range would lead me to expect that either the star image is padded with white space at the top or you're star-drawing code is drawing the star lower than it's supposed to.

Answer 2

I would look at the code right above position check:

var p=abPos($O('star'+n)), x=XY(e), oX=x.X-p.X, oY=x.Y-p.Y;

From what I can tell, oY is obviously wrong in relationship to the parent. At the top of the container, it starts at about 10, meaning you only have 9 pixels to select from vertically.

Basically, you need to fix or replace your absPos function. From a quick look around, it appears getting absolute positioning is not too easy cross browser: http://www.codeproject.com/KB/scripting/dom-element-abs-pos.aspx

I would prefer to use jquery's offset function.