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.
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.
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.
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.
Also just because it’s valid doesn’t make it right… Validation is just the FIRST STEP towards good practices.
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…
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…
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!
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.)