[RESOLVED] z-index issues (well, IE issues really...)

[memerson]

Hi all

I have been working on a menu bar which incorporates two search boxes both with Google-style drop down search term suggestion menus. However, the first drop down seems to be interfering with the breadcrumbs on the left hand side. I figured this would be a z-index issue but no matter how hard I try, the breadcrumbs just love to be on top of the drop down in IE. FF/Safari/Chrome - all fine.

Anyways, here is the link - click me (http://fairmoneydev.seriousgroup.co.uk/directory.html) (the drop downs are already dropped down for convenience).

Here is the structure for the breadcrumbs:

<div id="FM_innerbc">
<div id="FM_innerbctext">
<div id="FM_dbreadcrumbs">
<ul id="FM_dbreadcrumblist">
<li class="FM_firstbc"><a href="#">Home</a></li>
<li class=""><a href="#">Business Services</a></li>
<li class="FM_current"><a href="#">Marketing</a></li>
</ul>
</div>
<div class="FM_innertext"><strong>Market</strong> your business. List it for <strong>free</strong> <a title="List your business" href="#">here</a>
</div>
</div>
</div>

The CSS for the breadcrumb structure:

#FM_innerbc {
margin:0;
min-width:800px;
font-size: 12px;
line-height:1;
height:13px;
float: left;
margin-top: -33px;
margin-left:0.21em;
}

#FM_dbreadcrumbs {
float:left;
position:absolute;
text-align:left;
width:650px;
margin:10px 0 0 8px;
z-index:1;
}

ul#FM_dbreadcrumblist {
margin-top:-7px;
padding:0;
z-index:30;
margin-left:-8px;
list-style:none;
}

ul#FM_dbreadcrumblist li {
float:left;
font-weight: 100;
font-size: 12px;
color:#5A6899;
margin-right:3px;
padding:7px 0 5px 14px;
cursor:pointer;
height:12px;
background:transparent url('../images/list-arrow.gif') no-repeat 0 9px;
}

And for the drop down search suggestion menus:

.FM_searchdropbox {
font-size:12px;
background-color:#FFFFFF;
border:1px solid #5A6899;
height:auto;
width:auto;
min-width:110px;
position:absolute;
text-align:left;
overflow:hidden;
left:8px;
top:10px;
z-index:100;
}

Any help would be much appreciated.