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.
- MSIE 6
- Mozilla
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:
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.