IE8 incompatibility of z-index and body:after

Question

I have a two-way gradient background and a navigation bar. All the browsers display right except IE8 (even IE7 is ok).

The simplified code is here: http://jsfiddle.net/HKg9d/3/

If you adjust the window size and let the square cross the two parts of the background, the bottom part will overlap the square, only in IE8.

Answer 1

Try adding a position:relative to the .nav. z-index Applies to positioned elements (from the documentation)