[thelist] IE6 / CSS float display bug

[Raphael Mazoyer]

Hello people,

When redesigning a content management tool, I ran into a problem with
CSS and IE6. I wanted to avoid using tables altogether, and was very
happy to have A List Apart's Practical CSS column to serve me as a
guide when re-writing my HTML.

I had chosen to design for CSS compliant browsers, and to write valid
XHTML (i.e. HTML 4.01 with a XML-compliant markup). I thought I could
therefore test only in my usual browser (Mozilla), and only did a
little check in IE once in a while, feeling very happy about the big
boys finally following the standards.

But then I ran into a problem. On the aforementioned article, there's
a description of a way that'll allow you to avoid tables when
designing something like

<table>
  <tr>
    <td colspan="3">Header</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

There's a fairly simple way of dealing with this with CSS, which goes
along the lines of:

<div class="container">
  <p class="header">Header</p>
  <div style="clear: both"></div>
  <div style="float: left">One</div>
  <div style="float: left">Two</div>
  <div style="float: left">Three</div>
  <div style="clear: both"></div>
</div>

Unfortunately, IE6 has a faulty behavior when displaying the code
under certain conditions, creating a very strange display error.
"Header" might disappear entirely from the display, and re-appear
when you scroll down and back up.

Anyway, I've created some basic HTML to demonstrate this bug, and
I've make some workarounds to get your code working anyway. But I'm
not too happy about them, so I'm not going to publish it on Evolt
unless somebody points out the right solution.

Here's the stuff: http://nuclear.hku.nl/ie6css/

Does anybody have a better idea on how to fix this in a better way?


     Raph.


--
Raphaël Mazoyer - raphael at phase4.net - http://www.phase4.net/
Phase 4 - Pixel organization and information systems