Frustrating CSS Display Problem

[joe in nantucket]

Hello all,
I am trying to add the unobtrusive ajax star rating script to a page and I want the rating bar to display beside the text. It works in Firefox but not in IE for some reason. In IE, it puts the bar underneath the text like it's in a block instead of the inline-table that I have it set to.

Instead of an image, the script spits out an unordered list with each item as the star in the rating bar.

If anyone can give me some help, I would appreciate it.

======================
Here's the CSS code:

.ratingblock {
display:inline-table;
vertical-align:middle;
}

.loading {
height: 30px;
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/starrating1.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;
padding: 0px;
}

.unit-rating li a:hover{
background: url('../images/starrating1.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: 180px;}
.unit-rating a.r7-unit{left: 180px;}
.unit-rating a.r7-unit:hover{width: 210px;}
.unit-rating a.r8-unit{left: 210px;}
.unit-rating a.r8-unit:hover{width: 240px;}
.unit-rating a.r9-unit{left: 240px;}
.unit-rating a.r9-unit:hover{width: 270px;}
.unit-rating a.r10-unit{left: 270px;}
.unit-rating a.r10-unit:hover{width: 300px;}

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

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

======================
Here's the PHP code:

$static_rater = array();
$static_rater[] .= "\n".'<div class="ratingblock" style="display:inline;">';
$static_rater[] .= '<div id="unit_long'.$id.'" style="display:inline;">';
$static_rater[] .= '<ul id="unit_ul'.$id.'" class="unit-rating" style="width:'.$rating_unitwidth*$units.'px;">';
$static_rater[] .= '<li class="current-rating" style="width:'.$rating_width.'px;">Currently '.$rating2.'/'.$units.'</li>';
$static_rater[] .= '</ul>';
$static_rater[] .= '</div>';
$static_rater[] .= '</div>'."\n\n";

return join("\n", $static_rater);

[Marshall]

I don't think display:inline-table; is supported by IE. You may be better off using a <span>.

Marshall

[joe in nantucket]

Unfortunately Marshall, that didn't work.

If I make the rating bar into a graphic, it works fine in IE but because the script spits out the result as a list instead it doesn't work. I would make it into a table and if I get totally desperate then I will do that but since there could be as many as 50 lines with a rating bar, I would prefer to use CSS for this.