Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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

  • #2
    New Coder
    Join Date
    Aug 2010
    Posts
    53
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by kembreg View Post
    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.

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Attached Thumbnails Attached Thumbnails Display: inline -&gt; Vertically align-16reviews.jpg  


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •