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 report a bug with p:first-letter 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 six versions can be displayed here:

With Internet Explorer, using first-letter is risky as it can generate all sorts of issues.

In this testcase, there is no problem with Firefox, Konqueror, Safari or Opera but it's not always the case with first-letter.

The screenshot below shows the differences between browsers.

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. In our case, #content p:first-letter applies margin:0; to the second paragraph instead of the 70px set for the left margin in #content p. In the first paragraph, who knows which is the logic?

Removing * {margin:0;} will fix the problem for IE 6 and IE 7 RC1 and we will have to set margins in the other rules.

Replacing margin by padding

Replacing margin by padding will fix the problem for IE 6 and IE 7 RC1.

Removing the rule causing the issue

So that the rule p:first-letter is obeyed by IE 6, there must be a space before the curly bracket (with #content p:first-letter { the rule is applied , with #content p:first-letter{ it is dropped).

Removing the space fixes the problem with IE 6 but the effect for the first letter of the paragraph is lost.

IE 6

The other rule causing the problem is #content p.problem{} with any identity or class before or after p.

Removing this (re)definition fixes the problem with IE 6 but not with IE 7 RC1.

Using hasLayout

When we select the first paragraph with the DOM Inspector, we can see the blue box in its place and that hasLayout is not set in Current Style.

DOM inspector

Thus we add height:1% with the DOM Inspector, hasLayout appears and the first paragraph goes where it should be.

DOM inspector

Therefore we add height:1% in the page between conditional comments.

<!--[if IE]>
<style type="text/css">
#content p.problem{height:1%;}
</style>
<![endif]-->

This method fixes the issue with IE 6 and IE 7 RC1.