Question

I have the following CSS code

.editable:before {
    content: url(../images/icons/icon1.png);
    padding-right:5px;
}

this is used in conjunction with the following markup:

<span class="editable"></span>

In every other blessed browser in the world my icon is appearing, but IE8 seems to have a problem with this. Isn’t the :before pseudo-element CSS2? isn’t content: also a CSS2 command? what gives?

Answer 1

Update: I misread the page! IE 8 does support :before with images, it just doesn’t when it is in IE7 compatibility mode.

IE8 supports :before, but not and also images as content when not in compatibility mode. Kudos to @toscho for testing!

• Source

• Detailed comparison of which browsers can deal with what sort of content

How I love quirksmode.org, which makes dealing with this stuff at least half-way bearable. The guy deserves a medal!