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.
Try adding a position:relative to the .nav. z-index Applies to positioned elements (from the documentation)