placement issues in IE

I have been trying to fix a cross-browser problem I have been having for way too long, and need a fresh set of eyes to look over this. so any assistance would be appreciated.

here is the page: http://www.euclidsfifth.com/artistDataBase.php

the page properly displays in FF, but in IE6 it is all buggy. the stars underneath the image are what in question.

I cannot figure out a hack to make the star rating lineup properly in IE like it does in FF. Can anyone help?

here is the css code for the ratings

/* styles for the unit rater */
.ratingblock {
display:block;
margin: 8px 0 0 30px;
padding-top: 2px;
}

.loading {
height: 15px;
background: url(../images/working.gif) 50% 50% no-repeat;
}

.unit-rating { /* the UL */
list-style:none;
margin: 0px;
padding:0px;
height: 15px;
position: relative;
background: url(../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: 15px;
height: 15px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
/*\*/
position: absolute;
/* */
}

.unit-rating li a:hover{
background: url(../images/starrating.gif) left center;
z-index: 2;
left: 0px;
}

.unit-rating a.r1-unit{left: 0px;}
.unit-rating a.r1-unit:hover{width:15px;}
.unit-rating a.r2-unit{left:15px;}
.unit-rating a.r2-unit:hover{width: 30px;}
.unit-rating a.r3-unit{left: 30px;}
.unit-rating a.r3-unit:hover{width: 45px;}
.unit-rating a.r4-unit{left: 45px;}
.unit-rating a.r4-unit:hover{width: 60px;}
.unit-rating a.r5-unit{left: 60px;}
.unit-rating a.r5-unit:hover{width: 75px;}
.unit-rating a.r6-unit{left: 75px;}
.unit-rating a.r6-unit:hover{width: 90px;}
.unit-rating a.r7-unit{left: 90px;}
.unit-rating a.r7-unit:hover{width: 105px;}
.unit-rating a.r8-unit{left: 105px;}
.unit-rating a.r8-unit:hover{width: 120px;}
.unit-rating a.r9-unit{left: 120px;}
.unit-rating a.r9-unit:hover{width: 135px;}
.unit-rating a.r10-unit{left: 135px;}
.unit-rating a.r10-unit:hover{width: 150px;}

.unit-rating li.current-rating {
background: url(../images/starrating.gif) left bottom;
position: absolute;
height: 15px;
display: block;
text-indent: -9000px;
z-index: 1;
}

.voted {color:#999;}
.thanks {color:#36AA3D;}


and here is the code for the general html
/* From Layout.css */

#everything{
margin: 0 0 6px 0;
padding: 0px;
background-image: url(../images/background/bgRepeat.gif);
color: white;
font-family:Georgia, "Times New Roman", Times, serif;
}
#titleImage{
width: 750px;
height: 250px;
background-image: url(../images/titleImage.gif);
margin: 5px 0 0 10px;
}
a {
color: #CCCCCC;
text-decoration: none;
}
a:hover {
color: white;
text-decoration: underline;
}
.footer {
font-size: 10px;
color: #cccccc;
font-family: Arial, Helvetica, sans-serif;
text-align:left;
}
.footer {
width: 745px;
background-color: #333333;
margin: 5px 0 5px 10px;
padding: 0 0 1px 5px;
}
/*********************/

#StarsMasterColumn{
width: 750px;
background-color: #333333;
margin: 5px 0 0 10px;
padding-top: 10px;
}

.starsSpecial {
width: 612px;
height: 100%;
background-color: #333;
margin: 0 0 0 138px;
padding: 0 0 0 10px;
}

.starsContainer {
float: left;
width: 135px;
height: 136px;
padding-left: 13px;
padding-top: 4px;
background: url(../images/artistRating/background.gif) no-repeat;
background-color: #333333;
margin: 10px 0 0 4px;
}

#starsName {
color: white;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
}

#starsArtistImage {
width: 108px;
height: 73px;
border: 1px solid white;
margin-top: 3px;
}

#starsRatingContainer {
width: 110px;
height: 20px;
background: url(../images/artistRating/starBackground.gif) no-repeat;
vertical-align: bottom;
margin-top: 10px;
}


much thanks in advance.

Don't thank people in advance. It makes us think you take our help for granted. You need to set the left and top values for your links
.unit-rating li a {
outline: none;
display: block;
width: 15px;
height: 15px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
/*\*/
position: absolute;
/* */
}
Make your lis position:relative; as well. This will allow the links to be positioned off of the lis rather than the browser window.

not taking advantage :) Im not online all day, I just wanted to express my grattitude for your work. this is a great community, and as soon as I can contribute, I will.


thanks for the assistance, I will try that fix

Maybe you can edit that title (http://codingforums.com/postguide.htm), while you're at it? Thanks in advance. :)

sorry about the title, fixed!

i understand the position: relative

but what do you mean by left and top?


are you talking about left: top:


margins? padding? im not sure

He probably means the left and top position for absolutely positioned elements:


#container {
position: relative;
}

#element {
position: absolute;
left: 10px;
top: 15px;
}

<div id="container">
<div id="element"><p>element</p></div>
</div>


…in this case #element is positioned 15px from the top of, and 10px from the left of, the #container element.

Hope this helps…