jancology.com

The last rough edge is a long lasting css bug. The bug bites in all IE browsers that support a high level of css; like 5.0, 5.5 and 6.0.

The problem is cause by mixing a floating side bar div together with div { clear:both; } It shows in two ways:

1. IE does not render the background color
2. IE clears the current div and looks at floating divs outside the current div

My page structure is defined as following:

1. Header div
2. Sidebar div which floats to the left and has width of 140px
3. Content div which does NOT float and spans the whole page width. It has a left margin of 150px so the siderbar background is excluded from the content.

To fix the issue I investigated a number of sites with a similar structure an found out that these sites did not have the problem because they did not mix different div types. I came up with the following structure:

1. Header div
2. Sidebar div which floats to the left and has width of 140px
3. Content div which floats to the left and has width of 550px so it just fill the available page space (total of 720px)

This solves my issue in IE6. But as soon as I tested in IE 5.01 and IE 5.5 I found out that the wrong css box model of these browsers was causing problems. The content div slide under the sidebar ebcause there wasn’t enough spacve available. I had to implement the Box Model Hack to work around this. This fixed all my issues on all major browsers.

The last challenge was checking if the site rendered fine under safari as I do not have access to a Mac. Fortunately iCapture would help resolving this issue: