Problem w/ star rating in WP: Layout changes when published
-
snikadin
- Posts: 24
- Joined: 22 Oct 09
- Trust:
13 Feb 10 9:21 am
Problem w/ star rating in WP: Layout changes when published
Hi everyone!
I'm writing my review articles for my website. I have tried adding star ratings for some 5 hours now and I'm starting to get really frustrated :(. Whichever image(s) I choose as my stars it always comes out wrong. The review layout I'm using is:
PRODUCT X REVIEW:
Reviewer: My name
Rating: [Starimage]
Website reviewed: websiteurl.com
Price: $xxx
bla bla bla bla
bla bla bla
Ok so my problem is that in the wordpress blog editor, it looks great, the star images are positioned where they should be but as soon as I publish the post it's all messed up. The stars aren't on the same height as the "Rating:" text but quite a bit higher up so it looks like this:
Product X Review:
Reviewer: My name
*********
Rating:
Website reviewed: websiteurl.com
Price: $xxx
Do you see what I mean? This makes it look ridiculous. Please help me out, I've literally spent several hours on this and I have no idea how to fix it.
I'm writing my review articles for my website. I have tried adding star ratings for some 5 hours now and I'm starting to get really frustrated :(. Whichever image(s) I choose as my stars it always comes out wrong. The review layout I'm using is:
PRODUCT X REVIEW:
Reviewer: My name
Rating: [Starimage]
Website reviewed: websiteurl.com
Price: $xxx
bla bla bla bla
bla bla bla
Ok so my problem is that in the wordpress blog editor, it looks great, the star images are positioned where they should be but as soon as I publish the post it's all messed up. The stars aren't on the same height as the "Rating:" text but quite a bit higher up so it looks like this:
Product X Review:
Reviewer: My name
*********
Rating:
Website reviewed: websiteurl.com
Price: $xxx
Do you see what I mean? This makes it look ridiculous. Please help me out, I've literally spent several hours on this and I have no idea how to fix it.
Last edited by michellerana on 15 Feb 10 1:56 am, edited 1 time in total.
Reason: improve title to describe the post better
Reason: improve title to describe the post better
-
Aletta - Posts: 1363
- Joined: 09 Jul 06
- Location: New Zealand
- Trust:
14 Feb 10 11:56 pm
Hmm. What theme are you using? It sounds like there might be some padding/margins being added to that image by the theme/stylesheet.
We're updating the AB theme and I ran into this the other day. The developer thought it would be nice to add some padding to all images in the main panel, not realizing that sometimes we'd have tiny, tiny images like those stars!
If you went into HTML view for that and found the star image, you could add the following into your <img> tag:
So it would now read something like:
Depending on how the CSS has been set up, that might override it.
We're updating the AB theme and I ran into this the other day. The developer thought it would be nice to add some padding to all images in the main panel, not realizing that sometimes we'd have tiny, tiny images like those stars!
If you went into HTML view for that and found the star image, you could add the following into your <img> tag:
- Code: Select all
style="margin:0; padding:0;"
So it would now read something like:
- Code: Select all
<img src="yourimage.jpg" style="margin:0; padding:0;">
Depending on how the CSS has been set up, that might override it.
-
snikadin
- Posts: 24
- Joined: 22 Oct 09
- Trust:
15 Feb 10 4:31 pm
Yeeeay! Thank you soo much Aletta! That did wonders! I have tried wordpress support forums but they had no idea. You just kicked their asses!
Oh, and I'm using an artisteer generated theme. Many thanks!
Oh, and I'm using an artisteer generated theme. Many thanks!
-
Aletta - Posts: 1363
- Joined: 09 Jul 06
- Location: New Zealand
- Trust:
16 Feb 10 3:29 am
Anyone who actually took a good look at your page would be able to see where that was coming from, but since I didn't even have to look at your page I'll take that praise :)
