Peekaboo bug

[RammsteinNicCage]

I'm assuming that the problem I'm having is the peekaboo bug on IE6 and I've tried the workarounds (line-height, explicit width/height), but I still can't get it to work. This is what I have:

<div style="background-color:#0000FF; margin-bottom:20px; color:#FFFFFF;">
<h2 style="background-color:#FF00FF; display:block;">Some text here</h2>
<img src="image.jpg" alt="Seemann" style="float:right; width:180px; height:180px;" />
<h3>item count</h3>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<br style="clear:both" />
<h3>Information</h3>
<p>text<br />
more text<br />
yet even more text</p>
</div>

I'm using an xhtml 1.0 strict doctype, the xhtml and css validate. Can anyone get this to work without me having to redo the rest of the page design?

Jennifer

PS, those are just test colors, I'm not color blind :p

[Rambo Tribble]

It is the style="clear:both;" on the <br /> that is causing the problem. It seems to cause a problem if it is placed on any element after the image.

[RammsteinNicCage]

Well, I do need the clear because of the information below it, I don't want the image to get in the way of that. Should I do the clear in another way?

Jennifer

[Rambo Tribble]

Isn't it really the image you want the clear on? The block elements will stack without overlap, anyway.

[RammsteinNicCage]

When I add it to the image, the peekaboo bug goes away, but the image goes overlaps into the information area.

Jennifer

[SuzyUK]

Hi Jennifer

It is peekabo.. and width or height does work here, these need to be put on the container div..

if width 100% (on the container div) won't fit with the design the you can use the IE workaround of height: 1%; but just put it in hack or a conditional comment..

<div style="background-color:#0000FF; margin-bottom:20px; color:#FFFFFF; width: 100%;">

or

* html div.yourclassname {height: 1%;}

Suzy

[RammsteinNicCage]

Ah, thanks a lot Suzy. I tried making another div just around the image and put the width on that, I didn't think of putting it on the entire div.

Jennifer