Display: inline -> Vertically align

Hey all.

Check out:

www.linguashop.com/learn/russian.php

See the reviews with the text "4.9 out of 5 stars
18 reviews" ?

I am using display:inline to the the "18 reviews" on the same line as "4.9 out of 5 stars".

The problem is you can see the "18 reviews" is 2 pixels misaligned (vertically).
Changing the margin has no effect ( I guess due to display:inline).

Any idea why this is happening and how to resolve it?

Look forward to hearing from you.

David

Hey all.

Check out:

www.linguashop.com/learn/russian.php

See the reviews with the text "4.9 out of 5 stars
18 reviews" ?

I am using display:inline to the the "18 reviews" on the same line as "4.9 out of 5 stars".

The problem is you can see the "18 reviews" is 2 pixels misaligned (vertically).
Changing the margin has no effect ( I guess due to display:inline).

Any idea why this is happening and how to resolve it?

Look forward to hearing from you.

David

For your class="rating"

remove display:inline
Use float:left instead. See if that works well for you.

Thanks very much.
The float:left certainly did the trick.

Now something even more odd...

To write up a snippet, I had to add a <span> around the number of reviews:

<a href="../learn-spanish-reviews.php" class="linkText">
<span itemprop="votes">16</span> reviews
</a>

You will see in IE8 that the '16' is for some reason lower than the word 'reviews'
(attached is an image showing this).

I thought the <span> tag was supposed to cause no effect at all.

Look forward to hearing from you.

David