z-index in IE 6 and IE 7

Question

I had a nested div as I show below:

<div id="header"><div class="header-content">
 <div class="button"></div>
 <div id="menu"></div>
</div>
  <ul>
    <li></li>
  </ul>
</div>

Now my javascript code like that:

<script>
 $(".button").click(function(){
   $("#menu").css({
     position:"absolute",
     zIndex:50000,
     display:"block"
   });
 });
</script>

It's work fine in firefox but in IE 6 and IE 7 it's not above all. Any one had an experienced about this help me please!

Answer 1

Exactly the same

var show = function(){
  var menu = document.getElementById("menu");
  menu.style.position = "absolute";
  menu.style.zIndex = "50000";
  menu.style.display = "block";
  menu.style.top = 0;
}

works absolutely fine for me without JQuery. For both IE6 and IE7. Unfortunately can't test with JQuery now.

Is this example the exact code you are using?

Answer 2

The problem could be that your menu element is empty, and IE therefore collapses it so you can't see it. (At least with your example code, that could be a problem. If your markup doesn't really look like that, please show us what it really looks like...)

Try:

<div id="header">
    <div class="header-content">
        <div class="button">& nbsp;</div>
        <div id="menu">& nbsp;</div>
    </div>
    <ul>
        <li>& nbsp;</li>
    </ul>
</div>

EDIT: The spaces between & and nbsp; shouldn't be there, but SO wouldn't actually print out the code if I just wrote  ...

Answer 3

I would guess you're trying to put the div over a <select>, <iframe> or <embed> / <object> such as Flash.

This is a known bug in earlier IEs.
There is a hack to get around it by putting your div inside an iframe, but it's not pretty.

Answer 4

<form action="ketqua.tintuc" name="myform">
  <div class="Search-text-box">
    <img src="http://xalo.vn/1.gif" onclick="return _e_(event,0)" />
    <input type="text" name="q" value="{query/@query}" text="{query/@query}" />
    <input id="hq" type="hidden" name="hq" value="{query/@hiddenquery}" />
    <div class="Search-menu">
      <xsl:choose>
        <xsl:when test="@category-label != ''">
          <xsl:value-of select="@category-label" />
        </xsl:when>
        <xsl:otherwise>
          Search all
        </xsl:otherwise>
      </xsl:choose>
    </div>
  </div>
  <div class="search-btn"></div>

• Tìm tất cả

this all my real html code and below exactly javascript code:

$("#Search-header-menu").css({
      top: top,
      left:left,
      display:"block",
      background:"#fff"
    });

Answer 5

Your problem is probably CSS related, rather than javascript related. Explorer handles z-index child, parent, and sibling elements different from the other browsers.

This article on z-index I wrote a while ago may help you out.

Answer 6

The answer above is likely correct - in IE css with positioning you'll likely have to set a z-index in the parent div (which I'm assuming is positioned relatively as well).