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 the content was pushed down 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 image has been changed and three versions can be displayed here:
We have:
- a problem with Firefox, Safari or Opera: the image is missing.
- a problem with Internet Explorer 6 and 7: the content is under the vertical navigation bar.
- a common issue: the content is wider than expected.
The screenshot below shows the differences between browsers.
- Initial display
Editing for Firefox
The missing image
Internet Explorer wrongly encloses floated content and we have to enclose it for compliant browsers. Therefore we add display:table; or overflow:hidden; with Web Developer Toolbar. The image appears.
The width
We remove width in #content with Web Developer Toolbar and the content is where we expected.
We check with Internet Explorer.
The content
Removing the width moved the content at the right of the navigation bar.
Using padding for the paragraphs is risky as it implies rules for the other tags we may use. Using padding for #content will be safer and will mean less code.
Setting margins for the first paragraph will improve the display. Thus we add #content p.first{margin-top:5px;}.
Our final display will be almost the same with recent browsers.
