Rating alignment error

Topics: ASP.NET 2.0
Mar 26, 2011 at 5:13 PM

I changed the default table layout to a div, but for some reason the rating part is getting misaligned like it has padding at the top. I uploaded an image to show you.

 

The problem probably is that there is some hardcoded padding being created, but i dont know from where its coming.

 

Thanks for the help

Mar 26, 2011 at 5:37 PM

Styles->Global.CSS

Mar 26, 2011 at 6:27 PM

Thanks Andy for you reply

 

I managed to get the text to go up, but i cant make the stars align properly. Do you know what i need to change for that?

 

Thanks

Mar 26, 2011 at 7:45 PM

Hi

Just back form an errand, are you talking about the brown block on mouse hover?

If so, it looks like you have some CSS that is overriding the rating hover, have a look in your theme's CSS file for the following;

.post .info a:hover {

Temporarily remove the line

background-color: #797167;

Just to see what happens, it's kind of difficult to know for sure, I'm inspecting it using Firefox, but you could certainly start by looking at that.

Mar 26, 2011 at 8:41 PM

No, that isnt the problem at all. Here, i uploaded another image:

 

 

I managed to align the text (it had a css property "top" which i removed) but i cant align the stars, its like it has invisible padding at the top.

 

Hope you see my problem, thanks

Mar 26, 2011 at 9:40 PM

Are you viewing the site in Internet Explorer 6 or 7 by any chance?

I'm looking at the pages displaying online at the moment and they look good apart from the brown block on hover.

When I  tab into the ratings they show up as you would expect them to, that is they do in every browser bar Internet Explorer 6 & 7.

In IE 6 & 7 the stars are out of alignment.

The alignment thing is a little trickier, When it comes to styling IE is a law unto itself, when I view it in IE 6 or 7 the stars actually run into the text on the right.

I will have a look at the alignment, but that's harder to fix without actually having the code to tweak the settings.

In the meantime I think you could get rid of the brown block on hover if you add this CSS to your theme CSS.

.post .info .star-rating a:hover {
    background-position: left bottom;
}

 

 

 

 

Mar 26, 2011 at 11:36 PM
Edited Mar 26, 2011 at 11:47 PM

You can normally fix positional irregularities with a bit of trial and error, but that requires having access to the code to make the adjustments.

You could try putting this in your theme CSS, if it moves the stars then you're on the right track.

.post .info .star-rating, .post .info .small-star {
    position:relative;
    left:0;
    top:14px;
}

If it does move them, then tweak the left and top properties.

It may be that you also have to make changes to the rating class which contains the stars and the currently rated text

Replace the current .rating with this if need be.

.rating {
    position:relative;
    text-align:left;
}

This is what I would start with, given the CSS that's already there.

Mar 26, 2011 at 11:40 PM

And for the hover, I forgot to include the line to clear the background color.

.post .info .star-rating a:hover {
    background-position: left bottom;
    background-color:transparent;
}

Mar 27, 2011 at 2:31 PM

Ok guys, i managed to get them to align after a lot of work. The only problem now is that the stars dont turn yellow when i hover on them.

 

.post .info a:hover { background: #797167; color: #FAFAFA; }  //It was inheriting this code for hover, if i remove it, the stars turn yellow on hover
.post .info .star-rating a:hover, .post .info small-star a:hover { background-position: left bottom; background-color:transparent;} //Made the brown go away but now it wont turn yellow

 

Any toughts?

Mar 27, 2011 at 3:31 PM

Try changing from

.post .info a:hover { background: #797167; color: #FAFAFA; }

to

.post .info a:hover { background-color: #797167; color: #FAFAFA; }

Mar 27, 2011 at 4:29 PM

Thanks bro, it works. Check it out live:

 

http://www.muscletitans.com/

 

:)