I am developing a site that includes a lot of layering per the design and has been tricky for me to code. I have used z-index quite a bit to achieve the look. At this point, everything displays properly on the mac in safari, firefox and chrome as well as in firefox and chrome on the PC. Unfortunately, IE is not displaying like the other browsers. Specifically, it is throwing the navigation to the right of the entire site, moving the navigation dividing lines up and not displaying the dropdown below Products.
I know that the navigation works properly (including the dropdown aspect and not pushing the dividing lines up) in IE because I stripped it down and checked. I am having problems when it is integrated into the layout. I am trying to use the technique to absolutely position the navigation within a centered, relatively positioned div in order to keep the navigation from moving upon window resizing. I have done some research on using position relative and absolute with z-index because I think that might be where my problem is. Apparently, IE treats z-index differently than other browsers. So, I have checked multiple times that the z-index numbers are in the proper order:
slideshow is at 0
slideshow images at 1
background gradient is at 3
navigation gray bar with black gradient is at 10
content is at 15
logo is at 20
navigation div and inner div are at 50
navigation ul is at 597
navigation dropdown is at 599
Here is the site: http://www.tweyen.com/test/cmt/index.html
I know it is a bit complicated. I have tried to strip out content I believe to be unrelated to the issue (content in the body below the slideshow).
I would appreciate any confirmation of z-index being the problem and/or any suggestions in general on how to try to solve this stinky IE issue. I have spent hours and hours on this and am really stuck.