Debugging CSS
Debugging the page for Firefox

The page that we use as an example was posted in a help forum, its author wanted to get rid of the space in the News Box menu in Internet Explorer.

As HTML is valid as well as CSS we can debug the page.

It has been reduced to a test case and three versions can be displayed here:

•  Page with no HTML and CSS errors 
•  Page corrected for Mozilla 
•  Debugged page 

The screenshots below show the differences between browsers.

• MSIE 6
• 
• Mozilla
• 
• Opera 9
• 

Editing for Firefox

The best method is to correct the styles (embedded or linked) with Firefox and check that Internet Explorer reacts correctly.

We add overflow:hidden; in #divContainer to enclose the floated content.

We remove the useless hack * html and move the attribute in #divLeftColumn.

We add #divRightColumn{margin-left:265px;} for the moment.

Then we can deal with Internet Explorer.