Sample code is below. If you look at it, you will see gray drop down boxes. These boxes are present in all browsers, but don't show in IE6 / IE7. Is there anyway to get this working in those browsers, without removing styles critical to the layout (for instance, I think removing a overflow: hidden off of something gets it to work but breaks the entire thing in IE6/IE7):
<!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>Title</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 ------------------------------ */
a img {
border: none;
display: none; }
h1 {
font-weight: bold;
font-size: 19px;
color: #333;
margin-bottom: 20px; }
h2 {
margin: 10px 0;
font: bold 13px Verdana;
color: #333; }
html, body {
height: 100%; }
body {
font-family: Verdana; }
#header {
width: 100%;
height: 60px;
padding: 15px 0;
background: #FFFFFF; }
#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;
position: relative; }
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 {
z-index: 30; }
ul#nav li.mega div {
position: absolute;
z-index: 200;
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;
/* commenting out for test case: display: none; */ }
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 {
padding-right: 300px; }
#content {
float: left;
display: inline; }
body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
background: #fff;
/* Minimum width remove line if not required (does not work in IE) */ }
/* column container */
.colmask {
position: relative;
/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear: both;
float: left;
width: 100%;
/* width of whole page */
overflow: hidden;
/* This chops off any overhanging divs */ }
/* 2 column right menu settings */
.rightmenu {
/* display: none; */ }
.rightmenu .colleft {
float: left;
width: 200%;
margin-left: -200px;
position: relative;
right: 100%;
background: #fff; }
.rightmenu .col1wrap {
float: left;
width: 50%;
position: relative;
left: 50%;
padding-bottom: 1em; }
.rightmenu .col1 {
margin: 50px 55px 0 245px;
/* removed temporarily: overflow:auto; */
padding-bottom: 20px; }
.rightmenu .col2 {
float: right;
width: 180px;
position: relative;
left: 195px; }
.rightmenu .col2 h3 {
display: inline-block;
color: #FFFFF;
margin-left: -9px;
padding: 10px 9px;
background-color: #5D973A;
cursor: pointer;
width: 100%;
color: #EEEEEE; }
body.ie6 .rightmenu .col2 h3, body.ie7 .rightmenu .col2 h3 {
display: inline; }
#sidebar {
width: 200px;
color: black;
float: right;
display: inline;
height: 300px; }
#footer {
width: 100%;
clear: both;
background: #333; }
#footer ul {
display: inline-block;
margin: 30px; }
body.ie6 #footer ul, body.ie7 #footer ul {
display: inline; }
#footer ul li {
display: inline-block;
list-style-type: none;
margin: 0 9px; }
body.ie6 #footer ul li, body.ie7 #footer ul li {
display: inline; }
#footer ul li a {
color: #FFF;
text-decoration: none;
font: normal 1.4em Verdana, sans-serif; }
.dataset {
display: none;
overflow: auto;
width: 100%;
font: normal 13px Verdana, sans-serif;
border-collapse: collapse;
margin: 0 0 0 0;
height: 200px;
}
.dataTables_wrapper {
margin: 0 0 40px 0; }
.dataset td {
padding: 3px 10px; }
.dataset th {
font: bold 10px Verdana, sans-serif;
text-align: left;
padding: 7px 3px 4px 10px; }
.dataTables_filter {
margin: 8px;
float: right; }
.dataTables_length {
margin: 8px;
float: left; }
.dataTables_info {
margin: 8px;
float: left; }
.dataTables_paginate {
margin: 8px;
float: right; }
.dataTables_paginate .ui-state-default {
padding: 2px; }
/* environmental impact styles */
#pg_environmental-impact .dataset tr.odd, #pg_reporting .dataset tr.odd {
background-color: #DDFFDD; }
#pg_environmental-impact .dataset tr.odd td:first-child, #pg_reporting .dataset tr.odd td:first-child {
background-color: #C4FFC4; }
#pg_environmental-impact .dataset tr.even td:first-child, #pg_reporting .dataset tr.even td:first-child {
background-color: #D5FFD5; }
.grp_dash .dataTables_scrollBody {
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC; }
/* end environmental impact styles */
/* Login Styles */
#pg_login {
background-color: #F5F5F5;
width: 100%;
height: 100%; }
#pg_login #login_nested {
height: 200px;
width: 298px;
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -150px;
text-align: right;
font: normal 12px Verdana, sans-serif; }
#pg_login #login_nested img {
text-align: right;
margin: 19px 39px 0 0; }
#pg_login #login_nested form {
margin-top: -10px;
text-align: left;
padding: 0 39px 30px; }
#pg_login #login_nested input#submit {
display: inline-block;
background-color: #808080;
color: white;
border: none;
padding: 10px;
font-size: 12px;
width: 100%;
border-bottom: 1px solid #666;
border-left: 1px solid #777; }
body.ie6 #pg_login #login_nested input#submit, body.ie7 #pg_login #login_nested input#submit {
display: inline; }
#pg_login #login_nested ul.errorlist {
color: red;
margin: 5px 0; }
#pg_login #login_nested ul.errorlist li {
list-style-type: none;
font: normal 10px Verdana, sans-serif; }
#pg_login #login_nested #id_username, #pg_login #login_nested #id_password, #pg_login #login_nested .placeholder {
padding: 7px 6px;
margin: 3px 0px;
width: 206px;
position: relative;
display: block; }
#pg_login #login_nested .placeholder {
color: #999; }
.grp_dash .highlights {
display: inline-block;
margin: 0 15px 10px 15px; }
body.ie6 .grp_dash .highlights, body.ie7 .grp_dash .highlights {
display: inline; }
.grp_dash .highlights p {
display: inline-block;
font: normal 12px Verdana;
text-align: center;
margin: 0 25px 15px 0; }
body.ie6 .grp_dash .highlights p, body.ie7 .grp_dash .highlights p {
display: inline; }
.grp_dash .highlights p strong {
display: block;
font: bold 14px Verdana; }
/* filterable pages */
#pg_reporting form fieldset, #pg_environmental-impact form fieldset {
display: none;
border: none; }
#pg_reporting form fieldset ul li, #pg_environmental-impact form fieldset ul li {
list-style-type: none; }
#pg_reporting form fieldset ul li label, #pg_environmental-impact form fieldset ul li label {
display: inline; }
form label {
/* display: block; */ }
/* export module */
#export_module {
margin-bottom: 15px;
margin-top: -10px;
display: none; }
</style>
</head>
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->
<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
<div id="pg_environmental-impact" class="">
<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="/">Blah</a></h2></li>
<li class="mega" style="z-index: 40;">
<h2><a href="#">Environmental Impact</a></h2>
<div>
<h3>Blah:</h3>
<p>
<a href="#">Blah</a>,
<a href="#">Blah</a>,
<a href="#">Blah</a>,
<a href="#">Blah</a>
</p>
</div>
</li>
<li class="mega">
<h2><a href="#">Blah</a></h2>
<div>
<h3>Blah</h3>
<p>
<a href="#">Blah</a>,
<a href="#">Blah</a>,
<a href="#">Blah</a>,
<a href="#">Blah</a>,
<a href="#">Blah</a>,
<a href="#">Blah</a>
</p>
</div>
</li>
<li>
<h2><a href="#">Blah</a></h2>
</li>
<li class="mega">
<h2><a href="#">Blah</a></h2>
<div>
<h3>Blah</h3>
<p>
<a href="#">Blah</a>,
<a href="#">Blah</a>
</p>
<h3>Miscellaneous</h3>
<p>
<a href="#">Blah</a>
</p>
</div>
</li>
</ul>
<div class="colmask rightmenu">
<div class="colleft">
<div class="col1wrap">
<div class="col1">
<h1>Page Title</h1>
<table class="dataset">
</table>
</div>
</div>
<div class="col2">
<!-- Column 2 start -->
<h2>More filters</h2>
<p>
<a href="#">Blah</a>
<a href="#">Blah</a>
<a href="#">Blah</a>
<a href="#">Blah</a>
</p>
<h2>Filter...</h2>
<!-- Column 2 end -->
</div>
</div>
</div>
<div id="footer">
<ul>
</ul>
</div>
</div>
</body>
</html>
EDIT: yeah all the styles have to be in the same file, and that conditional is the best way to target it. I have that code in production and it works fairly well. I know it isn't ideal but it's better than anything else I can think of doing.
EDIT: I did HEAVY stripping of all of our business logic from this code. There are a lot of elements, styling, and javascript I stripped out. How it is supposed to work, is when you hover over the navigation elements, the gray dropdowns appear. For troubleshooting this problem, I removed the display: none; from those elements and now I am simply trying to get them to appear.