JavaScript bug with ratings component in IE8 (possibly theme-specific issue, need help troubleshooting)

Topics: Themes
May 16, 2010 at 8:54 AM

Howdy folks,

I've been having a tough time trying to figure out what the Inove theme did to break the star-rating JavaScript in IE8 for my blog: http://www.aaronstannard.com/

Everything works fine in Firefox, but here's the issue in IE8: the JavaScript doesn't properly inject the necessary block of div tags and hyperlinks for setting up the clickable stars - the only stars which are clickable are the ones that have already been rated. By default most posts have the first two stars highlighted, so those two are clickable in IE8, but none of the others are. I took a look at the ratings-specific CSS in the Inove theme and compared it to the Standard theme (whose rating mechanism works just fine in IE8) and they're identical, and I don't think the Inove theme is breaking the DOM or anything like that given how the ratings component is pretty self-contained.

Anyone have any other ideas on what the issue might be?

Coordinator
May 16, 2010 at 11:20 PM

In your stylesheet, you have this:

.post .content ul li, .post .content ol li {
	list-style-position: inside;
	padding-left: 20px;
}
Remove the padding-left ... I think this will fix it in IE8.  It also fixes an issue in Firefox where right now it seems to show 2 more stars selected than what's really selected.  The 2nd post (Popular .NET Libraries) has zero ratings, but shows 2 stars.  And the 1st post has a rating of 2, but shows 4 stars selected.

Or if you want to keep the padding for the LI's in your posts, but just remove it for the rating system, you could leave the above CSS alone, but then add this CSS to remove the left padding just for the ratings:

.post .content ul.star-rating li {
	padding-left: 0;
}

May 16, 2010 at 11:39 PM

Thanks a lot! I tested the latter solution and it appears to work just fine! I was worried all of my posts would get 2 star ratings going forward :(