Posted by Ben C on 12/30/06 17:13

On 2006-12-30, rwap <rich@rwapservices.co.uk> wrote:
[snip]
> Opera v9 and even Front Page do not display the bullets. Firefox v2
> does however.
>
> The problem I think is to do with floating divs which have caused
> problems in IE 7 for some reason.

Now I see the problem! I have Opera, so I can actually see it.

First of all, don't make the img (hightech.jpg) align="left"; instead
add "float: left" to its styles and lose the align attribute.

The float extends past the bottom of the <h4> it's in, which means it
overflows subsequent block boxes. But inline boxes in those block boxes
flow around the float. So the background images are right at the left,
under the image, but the inline text is flowed around the float, to the
right.

This is as it should be and Opera (and Konqueror, and possibly IE) are
displaying the page correctly. It's Firefox that's wrong.

So put a new div in, starting after the <h4>, and ending after the
<div> containing the <ul>, i.e. around everything that's supposed to be
to the right of that image. Set that div's style to "margin-left:
200px", which is the width of hightech.jpg.

That way all the block boxes in that area have their left edges to the
right of the image, and so the background images shouldn't get left
behind. This works in Opera, Konqueror and Firefox. I don't have IE to
test it on.

> The solution to this problem is fairly straightforward, you need to
> create a table with two columns to put the image in the left hand
> column and the text in the right hand one.

Or you could use a table, but it isn't necessary.

[Back to original message]