:after pseudo element not working properly in IE8?

**Pixelateur** · Nov 17, 2011 16:01

Hello,

I am having some difficulties with the little orange banners labelled "Neu" ( = new) on my new website.

It seems that IE8 can't read the :after pseudo class properly, so the banners appear behind the images. Can anybody help me with that?

Thanks for any help.

P.S: In all other browsers it looks fine, as usual.

**sdt76** · Nov 17, 2011 18:34

There is a javascript that brings some CSS3 functionality to older browser. You can check it out here: http://code.google.com/p/ie7-js/. It might fix a bug or rendering issue.

**dresden_phoenix** · Nov 17, 2011 20:19

IE8 shoudl render BOTH before and after pseudo elements correctly and w/o the need for .js. If the "neu" banners are generated pseudo elements, and they are THERE , then IE has already done it's job.

I believe what you actually are seeing is a stacking order issue. I suggest you give the pseudo element a z-index:999 ; or something like that, and that should help bring that banners forward.

**Stomme poes** · Nov 18, 2011 02:32

Though, I would prolly still call this a bug on IE8's part, cause normally any abso-po'd child of a rel-po'd container should automagically have a higher stacking context than any other child in the container.

The image child, who comes before the fake :after child, should not be able to stack higher than the :after child anyways. In fact, in the recent CSSOff contest, where I needed a :before child to sit underneath all the other children who came later in the container, I had to give all those other children pos-rel and a z-index just to keep them on top. Which makes sense. It worked in IE8 too.

**Pixelateur** · Nov 18, 2011 12:57

Hmm strange, I still can't get this to work. I've already tried z-index on various parent and child elements, but nothing changes... :-(

**Pixelateur** · Nov 20, 2011 05:32

Hello,

the orange ribbons that I have on my new website are not displayed properly in Internet Explorer 8. I am using

Code:

:after

to put them on top of my images but they appear behind them! This is clearly a fault on IE's side, but I don't know how to fix it. I've already tried using

Code:

position: relative;

and z-index on all the related elements, but to no avail :-(

Can anybody help me with this?

Thanks...

**Paul O'B** · Nov 20, 2011 05:34

HI,

That's a nasty IE8 bug and it always puts the image on top of the pseudo contents background (not its foreground content like text).

Here's the reduced demo.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
a.new:after {
	background: red;
	content: " ";
	display: block;
	height: 32px;
	position: absolute;
	right: -2px;
	top: -2px;                                                            
	width: 32px;
	z-index: 999;
	clear:both
}
a.new {
	display:block;
	float:left;
	position:relative;
}
/*a.new img{position:relative;z-index:-1}*/
</style>
</head>

<body>
<div> <a class="new" href="#"><img class="project frame" src="http://2012.designbits.de/workspace/uploads/hanse-polo-vorschaubild.jpg" alt="Webdesign Hanseatischer Polo Club"></a></div>
</body>
</html>

You could set the image to a negative z-index and it will work in that small example above but not in your page as it puts the image under the background so can't be used.

You could instead supply a uri for the image rather than use as background image and stacking issues should be rectified although you won't be able to use your sprite.

Code:

a.new:after {
	content:url(http://2012.designbits.de/workspace/images/sprite.png);
	display: block;
	height: 32px;
	position: absolute;
	right: -5px;
	top: -5px;                                                            
	width: 32px;
	z-index: 999;
	clear:both
}

**ralph.m** · Nov 20, 2011 05:57

Just a suggestion, but instead of

Code:

content: ' ';

try

Code:

content: " ";

**Pixelateur** · Nov 20, 2011 06:21

Not working :-(

**Pixelateur** · Nov 20, 2011 06:25

Hey Paul,

Thanks for your help. So are you saying that this problem can't be solved in IE8 at all?

I played with negative z-indices, set a URI for the image, and also used the clip-property to crop the image. But nothing really works... :-(((( Do you have any more ideas?

**deathshadow60** · Nov 20, 2011 07:23

This is why on elements like that I suck it up and throw in a sandbag span. :after can't be trusted so long as IE8 and lower are still on the table... and even then I've had headaches with it in FF too, so it doesn't get a lot of use for overlapping elements from me.

Of course with the bloated train wreck html 5 shiv nonsense, nonsensical/nonexistant headings, STRONG tags around elements that shouldn't be recieving emphasis, and a general ice-skating uphill with things that just aren't ready for use on production websites, I'm a little surprised that's your biggest issue with the page... the whitespace compression to hide how bad the markup is just making it harder to diagnose what's going wrong with it too.

My advice: pitch it in the trash and use RECOMMENDATION technologies with semantic markup to build the page -- probably shave 2k off the markup in the process even with white-space added back in.

**Pixelateur** · Nov 20, 2011 07:41

@deathshadow:

If you had just invested two minutes of your time you would have seen that my site does in fact validate perfectly in all sorts of validators. This proves that my markup is clearly not "wrong".

If the headings don't make sense to you, that's probably because they're in German. Sorry about that, but my audience is based in Germany. I can't really build the entire site from scratch just because you don't understand it.

The whitespace bothers me too, but it's largely down to the XSLT content management system behind it. I am still looking for ways to solve this. I never claimed that this site is ready yet, that's why I am still using a subdomain for it. I hope this makes things more clear to you.

**Paul O'B** · Nov 20, 2011 08:38

Originally Posted by Pixelateur

Hey Paul,

Thanks for your help. So are you saying that this problem can't be solved in IE8 at all?

I played with negative z-indices, set a URI for the image, and also used the clip-property to crop the image. But nothing really works... :-(((( Do you have any more ideas?

The uri for the image worked for me. I tried it with firebug on your live site using the code I gave you and it worked fine. What problems do you have with it apart from creating a new image?

There was no other solution for IE8 as it seems to render the replacement image element always on top of the background of the generated content no matter what you do. That's why the uri worked because it is effectively foreground content. If you add some text to the generated content you van see that the text stays on top. Only the background goes under.

**Pixelateur** · Nov 20, 2011 09:29

Hey Paul,

ok, I am using this code now (I had some difficulties getting the clip property to work):

Code:

a.new:after {	
	display: block;
	position: absolute;	
	width: 330px;	
	height: 160px;
	top: -122px;	
	right: -120px;                                       
	content: url(../images/sprite.png);
	clip: rect(120px, 220px, 160px, 180px);
	z-index: 999;
}

It works across all browsers, except in IE8. So it's just like before.

Why do you think it's necessary to create a new image for it? Shouldn't it be working with my sprite and the clip property as well?

**deathshadow60** · Nov 20, 2011 09:53

Originally Posted by Pixelateur

If you had just invested two minutes of your time you would have seen that my site does in fact validate perfectly in all sorts of validators. This proves that my markup is clearly not "wrong".

Validating HTML 5 is MEANINGLESS gibberish due to the loosening of the structural rules... you are deploying a DRAFT spec that frankly, wouldn't be worth using even if it were a recommendation... especially if you're going to worry about legacy browsers -- throwing a javascript shiv at it isn't the answer either.

Also just because it's valid doesn't make it right... Validation is just the FIRST STEP towards good practices.

Originally Posted by Pixelateur

If the headings don't make sense to you, that's probably because they're in German. Sorry about that, but my audience is based in Germany. I can't really build the entire site from scratch just because you don't understand it.

No, it's because you have broken heading orders; REGARDLESS of what language the content is... mostly due to the element being the h1 not looking like the parent heading for all content on the page... though did you edit it; you appear to have h2 tags where FF's web dev toolbar was saying missing headings...

Originally Posted by Pixelateur

but it's largely down to the XSLT content management system behind it. I am still looking for ways to solve this.

Another technology I'd never use... Solution, don't use XSLT, it's slow, wasteful and inefficient in most cases. Much like the pointless HTML 5...

NOT that there's any reason for XSLT to be whitespace stripping...

**Pixelateur** · Nov 20, 2011 10:16

@deathshadow60:

It's fine by me if you hate HTML5. But you make it look like I invented HTML5. I didn't! Neither am I the first person to actually use it.

According to my stats only 2% of my visitors are using IE7 or below. 97% are using Webkit browsers or Firefox or Opera. So there's no need to cater for too many legacy browsers. If I was to build the next Facebook I would probably do so in HTML4. At least we agree on that one.

As for XSLT, you should check out Symphony CMS. I've already built a number of sites with it and it's actually pretty cool. It's definitely not slow!

**Pixelateur** · Nov 20, 2011 11:37

OK, I think I've got the solution. It's a bit ugly but it degrades beautifully.

Instead of this

Code:

a.new:after

I am simply using this

HTML Code:

a.new::after

The double colon notation is implemented by all "good" browsers. Only IE8 and lower can't read them.

This means that the ribbon is simply hidden in those browsers. But that's no problem at all since the ribbon is not strictly necessary from the reader's point of view.

Thanks for your help everybody.

P.S: If anybody comes up with a better solution, please let me know!!

Edit: I just figured that the z-index is still necessary with the double colon notation to make it work in good browsers:

Code:

a.new::after {
    z-index: 99;
}

**Paul O'B** · Nov 20, 2011 11:40

Originally Posted by Paul O'B

The uri for the image worked for me. I tried it with firebug on your live site using the code I gave you and it worked fine. What problems do you have with it apart from creating a new image?

There was no other solution for IE8 as it seems to render the replacement image element always on top of the background of the generated content no matter what you do. That's why the uri worked because it is effectively foreground content. If you add some text to the generated content you van see that the text stays on top. Only the background goes under.

Seems I may have lead you up the garden path here as I can no longer get it to work either and unfortunately I deleted the previous code I was testing with so I don't know if it was me or something has changed. I'll keep testing but what I tried before doesn't seem to be working so it looks like you'll have to add an element in the htm for IE8. (Ie8 does't use CSS expressions or you could polyfill it quite easily.)

Sorry if I delayed you.

**Pixelateur** · Nov 20, 2011 11:46

Hey Paul,

Look above, I just posted the solution. In fact it makes me a little proud that I found it before the grand-master himself this time ;-)

Thanks very much for your help.

**Paul O'B** · Nov 20, 2011 12:10

Ok,

I just realised why the code wasn't working and I had this rule in place also.

Code:

a.new img.frame{position:static}

That will allow the content uri to sit on top of the image but I couldn't make clip work with it also.

**Paul O'B** · Nov 20, 2011 13:46

This is working for me in IE8.

Code:

a.new:after {
	content:url(http://2012.designbits.de/workspace/images/sprite.png);
	clip: rect(120px, 220px, 160px, 180px);
	display: block;
 height: 160px;
 position: absolute;
 width: 330px;
 z-index: 99;
top:-121px;
left:9px;
}
a.new img.frame{position:static}

User Tag List

Thread: :after pseudo element not working properly in IE8?

Thread Tools

Display

:after pseudo element not working properly in IE8?

Strange stacking order in Internet Explorer 8 with :after pseudo-element

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions