Apparently, the problem was not about z-index at all. It was actually because I included a comment above the doctype tag. I will leave this question here though, in case anyone else runs into the same problem.

I know this question has been asked to death, but somehow I am unable to find a solution that works for my case. So here is the info about my specific problem:

Here is the website I am currently working on: http://trendexsys.com/test/

There are two main problems, both concerning z-indexes.

1) The first problem is that the dropdown menus do not work in IE. The dropdowns do not seem to show up at all.

2) The second problem is that, lower down on the index page, the black-gray gradient is supposed to appear behind the Gastrend and Gastrend Lite divs. However, this also does not work in IE. Instead, the gradient is only placed behind the Gastrend Lite div (as it would if no z-index were applied).

I know that I have not posted any HTML or CSS code. The reason for this is that I am not sure exactly what to post to be helpful. I am hoping that you can look at the website source and find the problem there. However, if requested I will try to post some code here.

Notes:
I have only tested on IE8 and IE9 (not IE7-) and the z-index does not work for either of those versions.
The site works perfectly in Chrome or Firefox or IE10.

If a solution already exists that will work for my case, please send me the link. I have wasted so much time on this problem, and have not found a solution that works.

Thanks in advance

有帮助吗?

解决方案

Its not actually z-index - rather its the comment above your doctype as that will cause IE to render the page in Quirks Mode. Just place the comments after your doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--By Christopher Mukherjee-->
<!--HTML code for Trendex Website Home page-->
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top