http://www.webdevout.net/test?013&raw
Shrink the window in IE6 / 7 to see what I’m talking about.
I stripped out all of the critical parts of my application (had to), but basically those gray boxes are supposed to be drop down boxes. In modern browsers, it works fine… but in IE6 / 7, the page content overshadows it (as well as some of the navigational links )…. any ideas? I can give anymore information needed, just let me know.
(page & code @ above link, and also posted down here for ease)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
/* RESET ------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0; }
body {
font-size: 62.5%; }
/* END OF RESET ------------------------------ */
/* ======= GENERAL SITE STYLES ==================== */
a img {
border: none; }
h1 {
font-weight: bold;
font-size: 19px;
color: #333;
margin-bottom: 20px; }
h2 {
margin: 10px 0;
font: bold 11px Verdana;
color: #333; }
html, body {
height: 100%; }
body {
font-family: Verdana;
border: 0;
width: 100%;
position: relative; }
/*Opera Fix*/
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; }
form label {
display: block; }
.page_defaults {
height: 100%;
width: 100%;
position: relative; }
#header {
width: 100%;
height: 60px;
padding: 15px 0;
background: #FFFFFF;
position: relative; }
#header_nest {
float: right;
margin-right: 5%; }
#header_nest img {
display: inline-block;
vertical-align: middle; }
body.ie6 #header_nest img, body.ie7 #header_nest img {
display: inline; }
#header_nest p {
font: normal 10px Verdana;
display: inline-block;
vertical-align: middle;
text-align: center;
margin: 0 25px 0 15px; }
body.ie6 #header_nest p, body.ie7 #header_nest p {
display: inline; }
ul#nav {
padding: 0 0 0 20px;
position: relative;
}
ul#nav li {
display: inline-block;
vertical-align: middle;
font: normal 11px Verdana, sans-serif;
list-style-type: none; }
body.ie6 ul#nav li, body.ie7 ul#nav li {
display: inline; }
ul#nav li h2 {
display: inline-block;
vertical-align: middle;
z-index: -1;
margin: 0;
font: normal 11px Verdana, sans-serif; }
body.ie6 ul#nav li h2, body.ie7 ul#nav li h2 {
display: inline; }
ul#nav li h2 a {
display: inline-block;
vertical-align: middle;
z-index: 4;
text-decoration: none;
position: relative;
color: #999;
padding: 20px 10px 20px 40px;
white-space: nowrap; }
body.ie6 ul#nav li h2 a, body.ie7 ul#nav li h2 a {
display: inline; }
ul#nav li.mega {
position: relative; }
ul#nav li.mega div {
position: absolute;
z-index: 5;
padding: 10px;
border-left: 1px solid #999;
border-right: 3px solid #999;
border-bottom: 2px solid #999;
top: 52px;
left: 0;
margin-right: 40px;
background: #CCC;
}
ul#nav li.mega div h3 {
display: inline;
font: bold 13px Verdana, sans-serif; }
ul#nav li.hovering div {
display: block; }
ul#nav img {
position: absolute;
z-index: -1;
top: 50%;
margin-top: -12px;
left: 8px; }
/* --------- Main portion (content, sidebar) ---------- */
#wrap {
min-height: 100%;
position: relative; }
#main {
overflow: auto;
padding-bottom: 150px;
position: relative; }
#content-wrapper {
float: left;
width: 100%; }
#content {
padding: 40px;
overflow: auto;
position: relative; }
#contentwrapper {
float: left;
min-height: 100%;
overflow: hidden;
width: 100%;
position: relative; }
/* NEW STYLES ------------------------- */
body.ie7 #main {
display: table;
height: 100%; }
body.ie6 #main {
float: left; }
body.ie6 #wrap {
display: table;
height: 100%; }
.dataset {
position: relative; }
.fg-toolbar {
clear: both; }
/* --------- Bottom portion (footer) -------------------- */
#footer {
position: relative;
margin-top: -150px;
height: 150px;
clear: both;
background: #333; }
</style>
</head>
<!--[if lte IE 6]>
<body class="ie6">
<![endif]-->
<!--[if lte IE 7]>
<body class="ie7">
<![endif]-->
<!--[if gte IE 8]><!-->
<body>
<!--<![endif]-->
<div id="" class="page_defaults grp_dash">
<div id="wrap">
<div id="header">
<div id="header_nest">
<p>Hello, <strong>User</strong><br />
<a href="/help/contact/">Get Help</a> |
<a href="/logout/">Logout</a>
</p>
</div>
</div>
<ul id="nav">
<li class="mega">
<h2><a href="/">Test</h2></li>
<li class="mega" style="z-index: 40;">
<h2><a href="#">Test</a></h2>
<div>
<h3>Test</h3>
<p>
<a href="">Test</a>,
<a href="">Test</a>,
<a href="">Test</a>,
<a href="">Test</a>
</p>
</div>
</li>
<li class="mega">
<h2><a href="#">Test</a></h2>
<div>
<h3>Test</h3>
<p>
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>
</p>
</div>
</li>
<li>
<h2><a href="#">Test</a></h2>
</li>
<li class="mega">
<h2><a href="#">Test</a></h2>
<div>
<h3>Test</h3>
<p>
<a href="#">Test</a>,
<a href="#">Test</a>
</p>
<h3>Test</h3>
<p>
<a href="#">Test</a>
</p>
<p>
<a href="#">Test</a>
<p>
</div>
</li>
</ul>
<div id="main">
<div id="contentwrapper">
<div id="content">
<h1>Page Title</h1>
<h2>Subtitle</h2>
</div>
</div>
</div>
</div>
<div id="footer">
<ul>
</ul>
</div>
</div>
</body>
</html>
It looks like this has to do with the Internet Explorer Z-Index Bug. That article describes how to get around it