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 know why the images were tiny with Internet Explorer on a few pages.

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 we can consider Internet Explorer.

The screenshots below show the differences between browsers.

Editing for Internet Explorer

The xml prolog

We could modify the CSS, but here it is the interpretation which is the cause : Firefox is in "Standards Compliance Mode"while Internet Explorer is in "Quirks Mode".

As a matter of fact, for Internet Explorer 6, the DOCTYPE must be the first line!

Thus we remove <?xml version="1.0" encoding="iso-8859-1"?> from the HTML and it fixes the problem.

Final display with IE 6:

final display

This bug has been partially fixed for IE 7. As Opera or Safari doesn't display correctly, another coding for this page will be necessary for a cross-browser solution.