SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div with <p> not top-aligning

    Hi,

    In my testimonial div in the right column, there's an image and text to the right. Why doesn't the text want to align exactly to the top of the image?

    http://versastudio.com/land/index-new/wisconsin-a/

    This happens with a div in the same way here:

    carecolumbus dot com (site in progress, don't want Google to spider it)

    Ideas? Note: Firebug is the easiest way to see what's going on.

    Thanks,

    Ben
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  2. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,830
    Mentioned
    111 Post(s)
    Tagged
    1 Thread(s)
    There's two things going on here. The first is that the letter glyphs in most fonts are less than 100% of maximum height. Even 'tall' letters don't go right up to the very top of the space allocated, so you'll always get a pixel or two of extra gap at the top. The second is that, with a line-spacing of 160%, that means that the vertical space allocated is increased and the text is centred vertically within that space, so it's another pixel or two further down than it would otherwise have been.

    There's no particularly elegant solution, but you could pull the text up by a few pixels (or push the image down) with position:relative;, or add a few rows of transparent pixels to the top of the image.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Or just do something like

    Code:
    .pic {margin-top: 4px;}

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both. This site, and your feedback, are invaluable.
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    No worries. We aim to please.


Tags for this Thread

Bookmarks

Posting Permissions

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