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 unscrollable in Internet Explorer 6.

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:

•  Page with no HTML and CSS errors 
•  Page debugged for IE 6 

As there is no problem with Firefox, Internet Explorer 7, Konqueror, Safari or Opera, we can consider Internet Explorer 6.

The screenshot below shows the differences between browsers.

• Initial display
• 

Editing for Internet Explorer

The universal selector

Often, in order to simplify the debugging, we use * {margin:0;padding:0;}. With IE it may cause conflits.

The author here used the universal selector to position all the elements * {position:relative;}.

Unfortunately, position:relative; applied to a box with no assigned dimensions generate many issues such as the "Unscrollable Content Bug" if hasLayout is not set.

Here, hasLayout is set in the containers. Thus, no quick and working fix for this.

As position:absolute; is not used by any nested element, position:relative; may not be useful. Thus we remove the universal rule and check for elements needing position:relative;.

Removing * {position:relative;} fixes the issue with IE 6.