Edit Question - KnowledgeHub

Title Body

This is a known error in IE8, look at the last bug here: http://nicolasgallagher.com/css-typography-experiment/demo/bugs.html Now, playing a bit with a simple example I found this (test it using IE8): http://jsfiddle.net/AjCPM/ <div id="target"> <div>div</div> </div> #target { position: relative; width: 200px; height: 200px; z-index: 1; } #target>div{ background: red; width: 200px; height: 200px; position: relative; z-index: 0; } #target:before { top: 0; left: 10%; width: 100%; height: 100%; background: cyan; content: "after"; position: absolute; z-index: 10; } IE8 renders the cyan rectangle (the :after) below the red rectangle, even when it has lower z-index. And now the tricky part: change the z-index for #target>div from 0 to -1 and voilá ! it's solved ! So I solved my problem now using a lot of z-index: -1; But I don't feel safe with this. Do you know a better solution? I'm using the :after pseudoelement because I have a list of products, and I want to add an image to the the item when it has the class 'sold' for example. I can create in the server or with JS a new html element for that, but I think using :after is the correct semantic solution. The problem is that I'm a bit paranoid about the :after pseudoelement now, do you think is better to avoid it?

Tags (comma-separated) Cancel