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 a solution for the missing lines in the menu 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 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 missing lines
When we select the first line of #menu with the DOM inspector, we can see the blue box and that hasLayout is not set in Current Style.
Thus we add height:1% with the DOM inspector, hasLayout appears as well as the first line.
We do the same for the other lines.
Therefore we add height:1%; in #menu li, preferably between conditional comments, in the HTML markup:
<!--[if IE]>
<style type="text/css">
#menu li{height:1%;}
</style>
<![endif]-->
The space between the buttons
The space between the buttons comes from the whitespace bug.
Many solutions here, the first one is to add #menu a in our instruction for IE, the most elegant is to add :
#menu a {display: inline-block;}
#menu a {display: block;}
We can do the same for #menu span.
We will have
<!--[if IE]>
<style type="text/css">
#menu li,#menu a,#menu span{height:1%;}
</style>
<![endif]-->
As Internet Explorer 7 is not affected by these bugs we can also have in your stylesheet
* html #menu a,* html #menu span,* html #menu li{height:1%;}
The negative margins
#menu uses negative margins. Without position:relative; in #menu,we get:
We do not have the probleme. Hovering the two first lines now the display we expected.
The only problem left is that there is no animation when hovering the two other lines (this animation has no meaning and this should be avoided).
In this case, no solution except a htc file or some javascript.
Our final display will be almost the same with recent browsers.
