Peter,
The image is set to "float: left" which means it is taken out of normal
flow. Containers (in this case the <li>) cannot determine the height of a
floated item, so they will close themselves immediately below any elements
that are in normal flow (in this case below the <h2> and the <p>) - leaving
your image poking out the bottom of the container. If the content were
deeper, this may not show, but it will always be the case with floated
items. It is completely normal browser behaviour. Does that make sense?
You have a number of choices (none of them great) including:
1. The simplest option is to set a height for the <li>, which will help for
short text, but not if you have text that runs deeper than the thumbnail.
2. As Mark says, you could wrap the content in a <div> and float it right,
leaving the image in normal flow - this will mean the image determines the
height of the <li>. Dangerous option as height of text may break layout if
it is deeper than image.
3. You could set a height for the <li> and then apply each thumbnail image
as a background image to individual <li>'s - you can do this with an
individual class for each thumbnail. You would need to apply your <a>
element around the <h2> only in this case. You could then set padding on the
<h2> and <p> so that they do not sit over the top of the background image
Again, problems if you have content that runs deeper than the thumbnail. It
could be argued that the images are decorative, and if this option is used,
they will then be removed from the document altogether. If you remove all
CSS you will be left with a clean list (each list item will simply have an
<h2> and <p>). Some would say this is the most semantically correct option -
weird maybe, but semantically correct.
HTH
Russ
> Whoops sorry about that. There's also a:
>
> mg.logo {
> float: left;
> border-right: 1px #b0bcc0 solid;
> }
>
> You guys are quick ...!
> Peter
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
