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 space below the two images in Internet Explorer.
As HTML is valid as well as CSS we can debug the page.
It has been reduced to a test case, images have been changed and two versions can be displayed here:
As there is no problem with Firefox, Opera or Safari we can consider Internet Explorer.
The screenshots below show the differences between browsers.
- MSIE 6
- Mozilla
Editing for Internet Explorer
The space
The problem is in #logo outlined in blue by the DOM Inspector in the screenshot below.
This time we have two images and we cannot apply display:block;. Thus we will use vertical-align:bottom; on the two images.
It has been done for the first image in the screenshot below:
As it works, we add #logo a img{vertical-align:bottom;} in the stylesheet.
Final display With IE 6 and 7:
