IE7 z-index problem

Question

Hiya! I'm having problems with z-index in IE7. I have a table where the user is asked to enter address. The javascript validator box 'formStatusBoxContainer' for postalCode is appearing behind the select box and the icon 'formStatusIcon' on the next row. Any idea how to solve this? Besides moving the box. Everything looks fine in FF and IE8.

<tr class="rowBack2">
  <th width="150px">Postleitzahl:</th>
  <td>
    <input type="text" name="postalCode" value="" >
    <span style="position: relative;">
      <span class="formStatusBoxContainer">
        <img src="/images/formfield_default.gif" class="formStatusIcon" 
          id="postalCodeIcon">
            <span class="formStatusBoxTooltip" style="display: none;" 
              id="postalCodeStatus">
              <div class="formStatusBoxInner" id="postalCodeStatusInner">
                Bitte geben Sie die Postleitzahl ein.
              </div>
            </span>
      </span>
    </span>
  </td>
</tr>       

<tr class="rowBack1">
  <th width="150px">Land:</th>
  <td>
    <span style="position: relative;">
      <select name="country" id="country">
        <option value="AX">Aland Inseln</option>
        <option value="DZ">Algerien</option>
        <option value="AD">Andorra</option>
      </select>
    </span>
    <span class="formStatusBoxContainer">
      <img src="/images/formfield_ok.gif" class="formStatusIcon" id="countryIcon">
      <span class="formStatusBoxTooltip" style="display: none;" id="countryStatus">
        <div class="formStatusBoxInner" id="countryStatusInner">Land</div>
      </span>
    </span>
  </td>
</tr>

CSS for tooltip:

.formStatusBoxContainer { position:relative; }
.formStatusIcon { position:relative; top:0px;margin-left:5px;z-index:2; }

.formStatusBoxTooltip {
position:absolute;
left:35px;
top:-5px;
width:150px;
background:#7EA822;
padding:1px;
border-right:2px solid #666666;
border-bottom:2px solid #666666;
z-index:3;
}

CSS for table rows:

Just fonts, margins and tabbing. Nothing with position or z-index that should affect.

Answer 1

It's a known issue in older versions of IE (I think IE7 fixed it). The select box will always be rendered on top of the other HTML elements. I believe it is because the select box is a Windows control and is not managed by the browser, or something along that line.

In any case, the most common solutions to this type of issue are: 1) Hiding the select box when the hidden/clipped control has the focus. 2) Putting an IFrame behind the control. The IFrames have the same properties as the select boxes, and also are always on top of the other HTML elements, including select tags. See http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx for an example of how to do it. That's of course an ugly hack.

Answer 2

To get around this in the past I have used BGiFrame with jQuery.

The reason for the problem is IE uses the windows dropdown control for the dropdown box where as all other browsers use a dropdown box coded into the rendering engine.

HTH

Answer 3

I believe you'll need to give the select box's parent a lower z-index (in this case the table?)

table {position:relative; z-index:1;}

I've had the problem before with dropdown menus appearing behind inputs and that solved those.