IE, floats and tables

Another bug in IE’s handling of floated content. This time with tables being the culprit. Naturally, a workaround is discussed.

Had an interesting morning fixing layout bugs in IE again. Yesterday, before I left work I fixed our intranet site to use floats instead of absolute positioning. IE had its own share of bugs, but that was to be expected.

Our intranet has what you’d probably call a typical two-column layout which is very similar (in markup) to this site. In the content area anything until a table was layed out more or less as you’d expect it to be. But hit the first table declaration and brown matter starts to hit the fan. The table and anything below it in the content div would not show.

I started debugging by using validators to validate my XHTML and CSS. Some small bugs had crept in but were easily fixed. Once all of the code was valid, time for another test. Alas, while often using the validators and creating valid code will remove odd behaviour, in this case it didn’t have any effect.

This time there were two lines of CSS rules that caused problems. Because I wanted the layout to look decent, I had on a rule that stated that table’s had to have a width of 95% of the parent element and that both sides should be cleared. The rule worked just fine in the old absolute layout. But removing those two lines fixed my current problem. And made the intranet look a bit more ugly in places. But at least it works now.