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

[font=verdana]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.[/font]

Or just do something like


.pic {margin-top: 4px;}

Thanks to both. This site, and your feedback, are invaluable.

No worries. We aim to please. :slight_smile: