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 there was a background color, disappearing text, extra text or missing text when using the scrollbar with Internet Explorer.
As HTML is valid as well as CSS we can debug the page.
It has been reduced to a test case, the text has been changed and two versions can be displayed here:
The screenshots below show the differences between browsers.
- Initial display
- MSIE 6
- Mozilla
Editing for Internet Explorer 6
The extra text
This bug (the duplicate content bug) may force us to modify the HTML. We can remove the comments, use conditional comments <!--[if !IE]>comments...<![endif]-->, add a -3px right-margin in the last floated element (here it doesn't work), find the comment triggering the bug (here it may be <!--End of leftSidebar-->) or trigger hasLayout in the container.
We enter height:1%; in #Content, hasLayout is set to -1 and the letters disappear.
The missing text
hasLayout in #Content also made the missing letters reappear in the footer.
Thus we add height:1%; in #Content, preferably between conditional comments, in the source code:
<!--[if IE]>
<style type="text/css">
#Content{height:1%;}
</style>
<![endif]-->
The disappearing text
We can do the same as above for #Header.
We replace #Content{height:1%;} by #Content,#Header{height:1%;}
The horizontal navigation bar
This is a problem with Internet Explorer 7 too.
We can do the same as above for #HorizontalBar.
We replace #Content,#Header{height:1%;} by #Content,#Header,#HorizontalBar{height:1%;}
The background color
Adding #HorizontalBar{height:1%;} fixed the problem.
The vertical menu
The space between the buttons of the menu comes from the whitespace bug.
Here we can do the same as above with the links:
Many solutions here, the first one is to add .Block a in our instruction for IE, the most elegant is to add :
.Block a {display: inline-block;}
.Block a {display: block;}
The space under the footer is the margin in #Wrap. Replacing margin:3px; by margin:3px 3px 0; fixes the issue.
Editing for Opera
Everything seems fine. Let's check with Opera.
As the color is missing on the left of #logIn and #SearchHelp, we open the DOM inspector in the toolbar for Opera.
Internet Explorer wrongly encloses floated content and we have to enclose it for compliant browsers. Therefore #logIn, NavHor2 and #SearchHelp are not enclosed by #HorizontalBar. So we add overflow:hidden; in #HorizontalBar.
Our final display will be almost the same with recent browsers.
hasLayout correctly used allows us to fix many problems with Internet Explorer. However we can avoid most of them by using other coding techniques.