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:

enter image description here

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

check if any of the parent node of languages box is behind the category box or not — KoolKabin, Mar 01 '11 at 12:08
You could make a test case on [JS Bin](http://jsbin.com) by taking the source of the problematic page and placing imported stylesheets in ` — thirtydot, Mar 02 '11 at 00:42

score 2 · Accepted Answer · edited May 23 '17 at 12:07

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:

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!

score 0 · Answer 2 · answered Mar 01 '11 at 11:56

0

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.

answered Mar 01 '11 at 11:56

Delan Azabani

79,602
28
170
210

i've tried adding ``z-index:999`` to the language box, but it doesn't change anything. Also, moving the language box to another location is not possible. – Or Weinberger Mar 01 '11 at 11:57

score 0 · Answer 3 · answered Mar 01 '11 at 11:57

0

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

answered Mar 01 '11 at 11:57

Exelian

5,749
1
30
49

score 0 · Answer 4 · answered Mar 01 '11 at 11:57

0

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

answered Mar 01 '11 at 11:57

derekcohen

1,514
4
17
34

score 0 · Answer 5 · answered Mar 01 '11 at 12:06

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.

div layering problems

5 Answers5

Linked