Object shifts itself into the item that follows it next

As if the item was floated right, but its not

[Jeremy_H]

I'm using a modified version of a AJAX CSS Star Rating Script, and I'm having a little bit of a problem with it's style.

Right now, the script wants to "take over" part of the next item, which right now happens to be my horizontal line. It embeds itself into that.

If a DIV followed next with a character, the stars would show to the right. If the DIV was empty, it would "take over" part of the next item.

So far this only seems to happen in IE6.

Any ideas?

The HTML:

<ul class="sr">
<li id="cr" style="width:25px">Current Rating: X</li>
<li><a href="#" onclick="return rate(1)" class="s1" title="This article is awful!">1</a></li>
<li><a href="#" onclick="return rate(2)" class="s2" title="This article is bad.">2</a></li>
<li><a href="#" onclick="return rate(3)" class="s3" title="This article is okay.">3</a></li>
<li><a href="#" onclick="return rate(4)" class="s4" title="This article is good.">4</a></li>
<li><a href="#" onclick="return rate(5)" class="s5" title="This article is great!">5</a></li>
</ul>
<hr />

The CSS:

.sr{list-style:none;margin:0;padding:0;width:125px;height:25px;position:relative;background:url(/img/star.png) top left;cursor:pointer}
.sr li{padding:0;margin:0;float:left}
.sr a{display:block;width:25px;height:25px;text-indent:-999px;overflow:hidden;z-index:3;position:absolute;padding:0}
.sr a:hover{background:url(/img/star.png) left bottom;z-index:2;left:0}
#cr{background:url(/img/star.png) left center;position:absolute;height:25px;display:block;text-indent:-999px;z-index:1}
.s1{left:0}
.s1:hover{width:25px}
.s2{left:25px}
.s2:hover{width:50px}
.s3{left: 50px}
.s3:hover{width:75px}
.s4{left:75px}
.s4:hover{width:100px}
.s5{left:100px}
.s5:hover{width: 125px}

[SuzyUK]

Jeremy that sample of code is working fine in IE6, there is no shifting

I can only assume it's some form of clearance/positioning problem due to something else on your page, likely what comes before the script rather than after it, do the stars follow a floated element?

try wrapping the whole ul (star script) in a div and set it [div] to be 100% wide, I wonder if trying to invoke natural clearance might help

IE6 (&7) does have some some problems with absolute positioning when the immediate parent is not the containing block (in this case the <a> element's containing block for positioning should be the <ul> and not the parent <li> so it could be that) however this is complete guesswork as your code is not displaying what you describe

if the above is no help, can you get us a working sample using the minimum of your layout code?

Suzy

[edited by: SuzyUK at 11:28 am (utc) on Jan. 5, 2007]