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

T

5

11

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?

Tingaling answered 30/3, 2010 at 15:4 Comment(1)

I Dont know about IE8, but :before and :after are not supported in IE7 and below. Dont know if they finally added support in 8 or not. If they did make sure the page isnt rendering in IE7 emulation. – Brittaniebrittany 30/3, 2010 at 15:7

P

23

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!

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

Paviour answered 30/3, 2010 at 15:5 Comment(2)

Ah and if I remember correctly, you can't put html code into it either, so using <img> is out... – Ambivert 30/3, 2010 at 15:7

@SLC: It gets rendered as text, yes. – Volar 30/3, 2010 at 15:11

M

24

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

Memorialist answered 17/4, 2012 at 13:36 Comment(3)

seeing this saved me a bunch of time, IE8 wasn't working for me because I had :: – Shutout 21/6, 2012 at 10:44

double colon was my problem, thanks for the heads up. How does one make this forward compatible? I.e. use single colon if it's less then IEX vs double colon if it's greater than IEY? – Triptych 14/1, 2013 at 13:26

@Triptych the single colon will work just as fine in IE>=9. So for now just stick with the single colon (which is the CSS2.1 standard). Only CSS3 differentiates between single and double colons for pseudo selectors and pseudo elements. – Dennison 23/1, 2014 at 15:51

P

23

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!

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

Paviour answered 30/3, 2010 at 15:5 Comment(2)

Ah and if I remember correctly, you can't put html code into it either, so using <img> is out... – Ambivert 30/3, 2010 at 15:7

@SLC: It gets rendered as text, yes. – Volar 30/3, 2010 at 15:11

G

10

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...

Gpo answered 15/10, 2012 at 12:26 Comment(3)

Thank you, this is actually the answer I personally was looking for. IE8 is now a-workin' for me. (Stupid IE8!) – Blodgett 5/9, 2013 at 13:31

You sir, saved me from a potentially day-long debug session why this &$(*# wouldn't work while every compatibility table says it should. – Dennison 23/1, 2014 at 15:48

but better to use ::before for modern browsers not sure if you can double up like close:before, close::before{etc... – Frump 30/6, 2015 at 8:23

R

6

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.

Rubicon answered 30/3, 2010 at 15:34 Comment(1)

you're right! IE8 as IE8 supports images as content. Cheers, updated my answer. +1. – Paviour 30/3, 2010 at 23:10

F

0

This is going off of Pekka's awesome example... My heights on my project was to tall for the row... So I added a padding-bottom: 0px;

Just in case you rain into this....

.icon-spinner:before {
    content: '';
    padding: 15px;
    padding-bottom: 0px;
    background: url("css.png") no-repeat left top;
}

Finisterre answered 30/9, 2013 at 15:51 Comment(0)

Recommended topics

Hot tags