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 get rid of a gap above the text with Internet Explorer.
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 Firefox, Safari or Opera we can consider Internet Explorer.
The screenshot below shows the differences between browsers.
- Initial display
Editing for Internet Explorer
The unwanted space / gap
When we select #maincontent with the DOM Inspector, we can see that the blue box is not where it should be and that hasLayout is not set in the styles.
We add height:1%; in #maincontent, hasLayout appears in the styles, the blue box outlines #maincontent and the gap above the text disappears. We have been lucky as sometimes margins must also be set.
It is not finished as the menu jumps when hovering and we have an extra button with Internet Explorer.
The extra button
We examine the rules and look for heights and widths in order to remove the useless ones.
Here we have too many widths. Removing width:158px; in #navcontainer makes the button disappear.
The unwanted move
We can also remove width in #leftcolumn. The shift disappears but the background color doesn't change on the whole buttons. The attribute to remove is padding:2%; in #leftcolumn.
The result:
We have not finished yet as there is still a gap between the menu and the text.
The menu is floated while #maincontent has no margin on the left. margin-left:10px; and margin-right:10px; are not very useful.
Two solutions, adding float:right; and width:197px; in #maincontent or adding margin-left:160px;. The second solution is the simplest and doesn't imply the setting of a width.
Final display:
