div layering problems

I am developing for an existing web application on an internal server, I can't really post all the code here as it'开发者_如何学Cs 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

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!

Setting the z-index of the language box manually may help. Of course, if you don't want to do this, putting the language box after the blue box in the markup will do the trick too.

You could try adding a z-index. This'll define which element is on top of which element: z-index

add a z-index to the style for the language box?

IE has some problem with z-index (see Google). As I had to fix a similar problem I was forced to use javascript to hide the background elements, which isn't really suitable for you.

You could try to change the order of creation in the html code, if possible.