Bug explained

Let's take two test cases. Let the DOM tree of these test cases be:

• .wrap
  • .colLeft
  • .colMain
    • .content
    • .colRight

The two test cases have the same CSS styling (you can check the code). The only difference is that in the the second test case the center element (.colMain) has enough content that its height gets bigger than the height of the left column (.colLeft).

As you can see in the test page, the results are very varied:

• Firefox 1.0.6, Opera 7.23, Opera 8.0 - OK
• IE 5+ - In the first test case the width of the main column is calculated as if the left column wouldn't exist, and is shifted to the right, and because of the container's overflow: hidden; some part of the right column is choped (hidden)
• IE 6 - same as in IE 5+, but it adds a new bug: it doesn't respect the container's overflow: hidden;, so if you would give the container a width of 100%, you would get a horizontal scrollbar.
• Opera 6.04 - in the first test case the container has the height of the main column and chopes the other columns; in the second test case the left column is shifted to the right and overlaps the main column (wierd effect)
• Netscape 7.02 - same as Opera 6.04, just that in the second test case the left column is simply hidden :)

Update: Apparently, IE behaves as it does because of its hasLayout bug. If we "give layout" to the main column in the first test case IE gets it correctly. For more on this subject read On having layout. (Thanks to Bruno for pointing this out to me)

Thoughts

If I think about it, toghether with the other css bugs I've found I might just start a whole new section dedicated to CSS bugs. Of course, as one is used until now, IE plays a major role in every bug. Will there be an end to this? Maybe with IE 7. But then again what about backwards-compatibility?

Comments