div layering problems

Question

I am developing for an existing web application on an internal server, I can't really post all the code here as it's very very messy but I can show you guys a screenshot of the problem and the relevant css code:

The languages menu should be on top of the blue bordered box, but instead it's beneath.

It works great in FF, this is a IE7 screenshot

blue bordered box css:

.categoryBox {
    width:100px;
    background-color:#000;
    border-style:solid;
    border-width:1px;
    border-color:#007CF7;
    padding:5px;
    float:left;
    height:260px;
    margin-right:25px;
    margin-bottom:20px;
    text-align:center;
    width:200px;
    position:relative;
}

language menu css:

#ChooseLanguageDlg
{
    display: none;
    position: absolute;     
    width: 87px; 
    height: 180px; 
    padding-left: 10px;
    padding-right: 10px;
    padding-top:0;
    margin-top: -9px;
    border: none 1px White;
    left: 751px;
    top: 10px;
    font-size:11px;
    overflow:hidden;
    text-align:center;
}

Note: the languages menu is using a javascript toggle to show/hide.

EDIT: Adding z-index to the language box does not change the visibility in IE

Answer 1

IE7 has known problems with z-index. Without seeing your page, the best I can do is point you to some useful links which explain the problem:

• http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
• IE7 Z-Index Layering Issues
• http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

The general idea is to poke position: relative (usually remove it) and z-index on parent elements of your drop down until it's fixed.

Good luck!