I have a strange problem with Internet Explorer 9. The CSS Filter Gradient used cuts off my submenu. For example, here's a JSFiddle. Below is a simple code:
HTML
<div id="headWrapper">
<header>
<nav id="main">
<ul>
<li>
<a href="javascript:void(0);">Parent Navigation Item</a>
<ul class="submenu">
<li><a href="javascript:void(0);">Child Nav Item 1</a></li>
<li><a href="javascript:void(0);">Child Nav Item 2</a></li>
<li><a href="javascript:void(0);">Child Nav Item 3</a></li>
<li><a href="javascript:void(0);">Child Nav Item 4</a></li>
<li><a href="javascript:void(0);">Child Nav Item 5</a></li>
<li><a href="javascript:void(0);">Child Nav Item 6</a></li>
</ul>
</li>
</ul>
</nav><!-- main -->
</header>
</div><!-- headWrapper -->
CSS
*{margin: 0; padding: 0;}
header, nav {display: block;}
#headWrapper {border-bottom: 1px solid #eee; position: relative; z-index: 5; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1eaf0',GradientType=0 );}
header {width: 1000px; height: 75px; margin: 0 auto; clear: both;}
#main {float: left;}
#main ul {list-style: none;}
#main li {float: left;}
#main a {display: block;}
#main li ul.submenu {display: block; padding: 4px; border: 1px solid #000; position: absolute; z-index: 999; border: 1px solid #ddd; margin-left: 12px; border-top: 0; background-color: beige; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;}
#main li ul.submenu li {float: none; display: block;}
If I remove the filter gradient from my #headWrapper
my menu works as expected. With the gradient in there I can only view the border and it cuts off anything past the headers actual height.
- Why is this happening?
- How do I go about fixing it?
I've tested it via IE Emulated and Browser Shots and it shows up broken in both so it seems like it's not just an emulator issue (or Browser Shots is using an emulator and just showing me what I already know). I've been playing around with it for an hour and have had no luck fixing it unless I remove the gradient entirely OR remove the fixed / z-index which I also do not want to do.