Debugging CSS
Debugging the page for Internet Explorer
The page that we use as an example was posted in a help forum, its author wanted to find why the divisions were not aligned with Internet Explorer 6.
As HTML is valid as well as CSS we can debug the page.
It has been reduced to a test case and two versions can be displayed here:
As there is no problem with Internet Explorer 7, Firefox, Safari or Opera we can consider Internet Explorer 6.
The screenshot below shows the differences between browsers.
- Initial display
- IE 6
- Mozilla
Editing for Internet Explorer 6
The margins
When we select #leftcol with the DOM Inspector, we see in Current Style that the margin on the left has been set to 4px.
When we select #rightcontent with the DOM Inspector, we see that the margin on the left has been set to 4px.
We measure the space for #leftcol in Firefox with Web Developper, the margin on the left is 4px.
We measure the space for Internet Explorer with the DOM Inspector, the margin on the left is 8px.
We measure the space for #rightcontent in Internet Explorer with the DOM Inspector, the margin on the left is 8px.
Thus this is the Doubled Float-Margin Bug. The fix is to add display:inline; in the float containers.
We begin by #leftcol.
Then #rightcol.
Then #leftcontent.
And #rightcontent.
Therefore we add #leftcol,#rightcol,#maincol,#leftcontent,#rightcontent{display:inline;} for Internet Explorer 6 in our stylesheet as this rule has no effect on the other browsers.
Our final display will be almost the same with recent browsers.
