Take the 2-minute tour ×

I've got an HTML-element, let's say nav. To apply some fancy styles to it, I use nav:after with the following code:

header nav:after {
    content: "";
    width: 925px;
    height: 54px;
    display: block;
    left: -4px;
    top: -4px;
    z-index: -1;
    position: absolute;

In all browsers, I get the desired result with that code. Only Internet Explorer 9 behaves differently.

The :after-element is positioned 4px too high and 4px too much to the left. As you can see, this is clearly the result of the CSS, but the -4px top and left are needed to position the element correctly in all other browsers.

If I set top and left to zero, it looks fine in IE9, but wrong in all other browsers.

So either way, it looks wrong - so somehow I have to decide for what kind of browser I want to style. There must be some workaround, what can I do?

share|improve this question
Bring some more example code. Maybe on jsfiddle.net –  HerrSerker Mar 11 '12 at 14:45
Here is an example: jsfiddle.net/Mh4Dq. As you can see - it is working there, so the problem is not the code there but inside some oder CSS-rule. The strange thing is: Only the code from the fiddle inside my CSS it is working, but everything but the code from the fiddle as comment it is not working. I can't understand this at all. –  Sven Mar 11 '12 at 15:28
Just try and add successive parts of your other code until the error occurs. –  HerrSerker Mar 11 '12 at 20:29
add comment


Your Answer



Browse other questions tagged or ask your own question.