[Webpro] CSS table-less: IE gap below picture

[Mike S. Krischker]

At 14:50 28.01.2005 -0600, you wrote:
>Mike, I haven't looked at your code, but the deal is probably this...
>images are inline objects, so they have a gap below them to account for
>descenders. (http://www.planet-typography.com/manual/anatomy.html)
>Basically, the image sits on the baseline.  If the image is in a div,
>you can give that div line-height: 0; play around with it.

Thanks Jason, that's an interesting thought. I tried it, but it's really
the top/bottom margin of the p tag inside the box. Still don't know
exactly why - it has nothing to do with the length of the text.

The image is a float:left, while the text paragraph is not, and IE seems
to 'think' that the image has therefore to be less high than the paragraph,
because it's floating in it - or it needs the same bottom margin as the
text (why not also the top margin?)... Anyway, now it seems to work. Even
the Safari and Mac IE 5.2 tests turned out well.

Floating is a wonderful concept, if used for text floating around
pictures, but when creating column layouts with it, it can get quite
tricky. For me it's still a hack like tables were, although I'm not coding
layouts with tables anymore.

Thanks again

Cheers

Mike