SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :after pseudo element not working properly in IE8?

    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.

  2. #2
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  5. #5
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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... :-(

  6. #6
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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
    }

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Just a suggestion, but instead of

    Code:
    content: ' ';
    try

    Code:
    content: " ";
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not working :-(

  10. #10
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Pixelateur View Post
    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.

  14. #14
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  15. #15
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pixelateur View Post
    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.

    Quote Originally Posted by Pixelateur View Post
    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...

    Quote Originally Posted by Pixelateur View Post
    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...

  16. #16
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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!

  17. #17
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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;
    }

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  19. #19
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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}

  22. #22
    SitePoint Member
    Join Date
    Jun 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks for the solution

    Great threat and great solution.
    I was experimenting exactly the same problem... I've change content:"" per content:url() and add position:static to the image, and it worked

    Thanks, you saved me quite a lot of time guys

  23. #23
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Shows how old threads showing up in search can still be useful :P


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •