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 space appearing when hovering the menu 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:

•  Page with no HTML and CSS errors 
•  Page debugged 

The screenshots below show the differences between browsers.

• Initial display
• MSIE 6
• Mozilla
• 

Editing for Internet Explorer 6

The appearing space

The DOM inspector allows us to see that:

hasLayout is set to -1 in #bar.

hasLayout is absent in #bar ul.

hasLayout is set to -1 in #bar ul li.

We enter height:1%; in #bar ul, hasLayout is set to -1 and the space disappears.

Thus we add height:1%; in #bar ul,preferably between conditional comments, in the HTML:

<!--[if IE]>
<style type="text/css">
#bar ul{height:1%;}
</style>
<![endif]-->

Our final display will be almost the same with recent browsers.