homepage Welcome to WebmasterWorld Guest from 107.21.135.68
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Object shifts itself into the item that follows it next
As if the item was floated right, but its not
Jeremy_H




msg:3208814
 1:50 am on Jan 5, 2007 (gmt 0)

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




msg:3209144
 11:24 am on Jan 5, 2007 (gmt 0)

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved