Call me stupid, but I really can't seem to suss this out XD
I installed a rating script, but now it won't sit right. The filled stars (that appear after a vote) are sitting on
top of the blank stars.
http://www.starrydollz.com/graphics/randomlyts1.phpIt's to do with the CSS somehow, but everytime I try to fix it all I do is
remove the blank stars, and that's no use to anyone >_<
.ratingblock {
display:block;
border-bottom:1px solid #999;
padding-bottom:8px;
margin-bottom:8px;
}
.loading {
height: 30px;
background: url('
http://www.starrydollz.com/rate/images/working.gif') 50% 50% no-repeat;
}
.unit-rating { /* the UL */
list-style:none;
margin: 0px;
padding:0px;
height: 30px;
position: relative;
background: url('
http://www.starrydollz.com/rate/images/starrating.gif') top left repeat-x;
}
.unit-rating li{
text-indent: -90000px;
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.unit-rating li a {
outline: none;
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.unit-rating li a:hover{
background: url('
http://www.starrydollz.com/rate/images/starrating.gif') left center;
z-index: 2;
left: 0px;
}
.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:30px;}
.unit-rating a.r2-unit{left:30px;}
.unit-rating a.r2-unit:hover{width: 60px;}
.unit-rating a.r3-unit{left: 60px;}
.unit-rating a.r3-unit:hover{width: 90px;}
.unit-rating a.r4-unit{left: 90px;}
.unit-rating a.r4-unit:hover{width: 120px;}
.unit-rating a.r5-unit{left: 120px;}
.unit-rating a.r5-unit:hover{width: 150px;}
.unit-rating li.current-rating {
background: url('
http://www.starrydollz.com/rate/images/starrating.gif') left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
.voted {color:#999;}
.thanks {color:#36AA3D;}
.static {color:#5D3126;}
/edit/
&& I just checked it in firefox, and it doesn't show the images at all! Any ideas how to fix
that?
IE:

FireFox:
