Positioning problem and CSS menu won't show through nested Divs in IE7

Question

For this site: http://writershore.com/ltlaw/

I validated the site as XHTML 1.0 Transitional, and now the absolute positioning doesn't seem to work and worst of all the menu doesn't work correctly in IE, it seems to show underneath the Div. In Firefox and Chrome the menu works fine.

1. Any thoughts on what is wrong with my positioning in the "main" Div?

2. Is the menu issue an overflow issue? A z-index issue? I've tried variations of both and doesn't fix the result in IE.

Thank you again for any ideas!

Answer 1

Then it's time to validate the CSS. 36 errors and 9 warnings:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwritershore.com%2Fltlaw%2F&profile=css21&usermedium=all&warning=1&lang=en

The menu showing behind the text is an IE7 issue, it works just fine in IE8. I will take a look at that and positioning and see if I can find something...

Edit:
You have forgotten the units on all the positioning, that's why the positioning isn't working. For example:

left: 40;

should be:

left: 40px;

Edit 2:
I think that z-index can work to fix the menu issue in IE7, you just have to set the z-index on the correct element. Now you have set it on the menu items, which are on a completely different depth level than the elements that you want to put them in front of. The elements on the same levels have the classes colorbigbar and main, there is where you should set the z-index.