Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get IE8 to accept a CSS :before tag?

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?

like image 474
William Calleja Avatar asked Mar 30 '10 15:03

William Calleja


4 Answers

Actually you should be careful here and read the detail. For full details, see this link - which states

In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :before. Beginning with Windows Internet Explorer 9, the ::before pseudo-element requires two colons, though the one-colon form is still recognized and behaves identically to the two-colon form.

Meaning for browsers <IE9 - you must use :before and for >=IE9 - you must use ::before

like image 171
Tim Avatar answered Oct 24 '22 07:10

Tim


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!

like image 31
Pekka Avatar answered Oct 24 '22 07:10

Pekka


When using :before and :after, just be careful not to use double colons (::after - will not work, but :after will work). I lost about 20mins for this...

like image 40
marinbgd Avatar answered Oct 24 '22 08:10

marinbgd


You may use the image as background for the generated content:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>Generated content with an image</title>
<style>
p:before
    {
        content:    '';
        padding:    20px;
        background: url("css.png") center center no-repeat;
    }
</style>
<p>Test</p>

Works in IE 8, Opera and Mozilla. Live-Demo.

like image 6
fuxia Avatar answered Oct 24 '22 08:10

fuxia