Css Overlapping...

[eluser]tdktank59[/eluser]
I have no idea whats causing this.
I have tried setting z-index on the menu (the menu that is floating under the grid)
I have no idea if IE7+ fixes this problem...
Im guessing it has something to do with multiple css emelemts on the menu...

Broken (IE6)
http://img182.imageshack.us/img182/7092/66767022y.png

Correct (FF)
http://img42.imageshack.us/img42/452/34851962.png

Menu:

Code:

<ul class="sf-menu sf-vertical menu">
        <li>&lt;?php echo anchor('brainstorms/grid','Problem Discovery',array('title' => 'Problem Discovery')); ?&gt;
            <ul>
                <li>&lt;?php echo anchor('brainstorms/grid','Brainstorms',array('title' => 'View All Brainstorms')); ?&gt;
                    <ul>
                        <li>&lt;?php echo anchor('brainstorms/create','Create',array('title' => 'Create Brainstorm')); ?&gt;</li>
                    </ul>
                </li>
                <li>&lt;?php echo anchor('dqips/grid','DQIPs',array('title' => 'DQIPs')); ?&gt;
                    <ul>
                        <li>&lt;?php echo anchor('dqips/create','Create',array('title' => 'Create DQIP')); ?&gt;</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>&lt;?php echo anchor('problems/inbox','Problem Resolution',array('title' => 'Problem Resolution')); ?&gt;
            <ul>
                <li>&lt;?php echo anchor('problems/inbox','Inbox',array('title' => 'Inbox')); ?&gt;</li>
                <li>&lt;?php echo anchor('problems/outbox','Outbox',array('title' => 'Outbox')); ?&gt;</li>
                <li>&lt;?php echo anchor('problems/assign','Assign Problems',array('title' => 'Assign Problems')); ?&gt;</li>
            </ul>
        </li>    
</ul>

CSS: (all css of elements involved...)

Code:

/* Menu */
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu li {
    border-bottom: 1px dashed #ffffff;
    margin: 0;
    padding: 0;
}
.menu li a {
    display: block;
    padding: 14px 0 14px 10px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 11px;
}
.menu li a:hover {
    display: block;
    padding: 14px 0 14px 10px;
    color: #FFFFFF;
    text-decoration: none;
    background-color:#090;
}
.sf-vertical, .sf-vertical li {
width: 150px;
}
.sf-vertical li:hover ul,
.sf-vertical li.sfHover ul {
    left:    150px;
    top:    0;
    background-color: #294867;
}
.sf-vertical .sf-sub-indicator { background-position: -10px 0; }
.sf-vertical a > .sf-sub-indicator { background-position: 0 0; }
.sf-vertical a:focus > .sf-sub-indicator,
.sf-vertical a:hover > .sf-sub-indicator,
.sf-vertical a:active > .sf-sub-indicator,
.sf-vertical li:hover > a > .sf-sub-indicator,
.sf-vertical li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
}
.sf-menu, .sf-menu * {
    margin:            0;
    padding:        0;
    list-style:        none;
}
.sf-menu {
    line-height:    1.0;
}
.sf-menu ul {
    position:        absolute;
    top:            -999em;
    width:            10em;
}
.sf-menu ul li {
    width:            100%;
}
.sf-menu li:hover {
    visibility:        inherit;
}
.sf-menu li {
    float:            left;
    position:        relative;
}
.sf-menu a {
    display:        block;
    position:        relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:            0;
    top:            2.5em;
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:            10em;
    top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:            10em;
    top:            0;
}
.sf-menu a.sf-with-ul {
    padding-right:     2.25em;
    min-width:        1px;
}
.sf-sub-indicator {
    position:        absolute;
    display:        block;
    right:            .75em;
    top:            1.05em; /* IE6 only */
    width:            10px;
    height:            10px;
    text-indent:     -999em;
    overflow:        hidden;
    background:        url('../../images/superfish/arrows-ffffff.png') no-repeat -10px -100px;
}
a > .sf-sub-indicator {
    top:            .8em;
    background-position: 0 -100px;
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px;
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0;
}
.sf-shadow ul {

    padding: 0 8px 9px 0;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
}
.sf-shadow ul.sf-shadow-off {
    background: transparent;
}

[eluser]Aken[/eluser]
Set a z-index to your content section that is lower than the z-index of the menu.

[eluser]tdktank59[/eluser]
fixed the grid...

However cant get it to appear over the dropdowns above the grid...

[eluser]Aken[/eluser]
A Google search yielded the information that IE6 renders the SELECT drop-down form element with basically an infinite z-index that can't be overwritten by anything. The only solution that seemed to work fairly well was to render a "hidden" iFrame underneath the navigation menu, but that's a really ugly solution in my opinion.

How dependent are you on requiring IE6 support? Will a lot of the people using your app be on IE6? It's one of those browsers that no one wants to support anymore, and in my opinion shouldn't support if the user base is small enough.

[eluser]tdktank59[/eluser]
Unfortunately IE6 is a must... Government environment (Basically) not even FireFox is supported but I don't know bout you but I cant develop without it (firebug and other things).

Either way IE6 is a must. There is no way around it... My solution at the moment is to just hide the darn select boxes until its needed...

Ill probably end up doing a javascript popup box that lets them filter. Instead of "hiding" it...

[eluser]omar-303[/eluser]
Jquery Bgiframe