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 the extra height of the search form 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
Editing for Internet Explorer 6
The unwanted space / gap
When we select .search with the DOM Inspector, we can see that the space comes from a child element of .search as margins have been set.
When we select the form in .search with the DOM Inspector, the blue box is where it should but default margins are not set.
We enter margin:0; for form and the space disappears.
We edit the stylesheet to add form{margin:0;}.
The other unwanted space / gap
Under the division .r2_c1 another space appears. Thus we examine .r2_c1 with the DOM Inspector and see that the margins are set. When we add .r2_c1 img{display:block;} or .r2_c1 img{vertical-align:bottom;} in the stylesheet, it doesn't remove the space.
Internet Explorer reserves space for the text even when a division is empty. We can insert a comment in the HTML or try font-size:0;.
Once the rule is entered, the space disappears.
Our final display will be almost the same with recent browsers.