Forum Moderators: not2easy
I am having some CSS issues with IE. I have a drop down menu that works fine with FF, however when viewing in IE the drop down menu ends up behind forms and other elements of my site.
I don't believe it's a z-index problem since I tried adjusting this and it also works in FF. Has anybody seen this before? Any guidance would be much appreciated. My code is below, Thanks!
DOC TYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
RELEVANT CSS CODE
/*Categories Navigation Menu*/
#ul_categories, #ul_categories ul {
list-style-type:none;
}
#ul_categories li {
position:relative;
}
#ul_categories ul li, #ul_categories ul li a, #ul_categories li:hover ul {
display:block;
background-color: #FFF;
}
#ul_categories li ul {
position:absolute;
display:none;
top:0;
left:15px;
padding:1px;
z-index: 10;
width:140px;
}
#ul_categories ul li {
background:url(images/ico_folder.gif) no-repeat left top;
padding:3px 3px 3px 20px;
}
#ul_categories ul li.selectedsubcat {
color:#fff;
}
#list_subcats
{
display:table;
width:100%;
}
#list_subcats h4
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
text-transform:uppercase;
color:#C73C0B;
background:#FFF url(images/dotx.gif) repeat-x bottom center;
margin:0;
padding:3px 0;
}
#list_subcats ul
{
margin:0;
padding:10px 0;
}
#list_subcats li
{
display:block;
float:left;
width:200px;
background: #FFFFFF url(images/ico_folder.gif) no-repeat left top;
padding:2px 0 2px 20px;
}
#list_subcats a,#list_subcats a:visited
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#7C1C1C;
font-weight:700;
text-decoration:none;
}
#list_subcats a:hover
{
font-weight:700;
text-decoration:underline;
}
#list_cats a,#list_cats a:visited
{
color:#3D3D3D;
font-weight:700;
text-decoration:none;
}
#list_cats a:hover
{
color:#BD2B2C;
font-weight:700;
}
HTML Code
<div id="list_cats">
<ul>
<ul id="ul_categories"><li><a href="http://www.example.com/maincat">Test Cat</a><ul><li><a href="http://www.example.com/subcategory1">Subcat1</a></li><li><a href="http://www.example.com/subcategory2">Subcat2</a></li><li><a href="http://www.example.com/subcategory3">Subcat3</a></li><li><a href="http://www.example.com/subcategory4">Subcat4</a></li>
</div>
Thanks for any help!
I don't believe it's a z-index problem since I tried adjusting this and it also works in FF
have you not seen this [webmasterworld.com]
put simply, z-index does not work how you likely expect it to, I would like to be so brave as to say, your issue is with IE and its CSS support, not the actual CSS z-index property support
[edited by: SuzyUK at 6:43 pm (utc) on May 4, 2009]
The weird part of this problem is that the first 2 menu options of my drop down seem to be working perfectly, but anything after that does not?
The main issue is that I can select the first 2 options of my drop down menu, however if I scroll over anything after the first 2 the drop down menu disappears.
Has anybody ever seen that before?
