Internet Explorer 9 Gradient Filter Cuts Off Submenu

Question

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.

1. Why is this happening?
2. 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.

Answer 1

I'd suggest using a separate element as well, but making it not sibling of the actual container, but its child element:

<div id="headWrapper">
    <div id="headerDummy"></div>
    <header>
        ...
    </header>
</div>

#headerDummy will play as a gradient holder, and we can make it stretch to fill the whole parent:

#headerDummy{

    /* The bacgkground-serving el will not interfere the normal flow, ... */
    position:absolute;

    /* ... it will have exactly the same size, as the container (you can make it taller or wider and don't have to change the #headerDummy style), ... */
    top:0;              
    left:0;
    display:block;
    width:100%;
    height:100%;

    /* ... be BEHIND the actual content... */
    z-index:1;

    /* ... and still have our gradient. */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endC
olorstr='#e1eaf0',GradientType=0 );
}

Everything that remains is telling the content to be above the background, that way:

header{
    position:relativer;
    z-index:10;
    ...
}

This is how it will look: http://jsfiddle.net/16qchfc6/22/

We could make it even better and more semantically correct by using a pseudo-element instead of an actual element, but unfortunately IE seems not to apply filter for pseudo-elelemnts

---

By the way, the actual live IE9 on Win7 shows the menu like this:

Taking the fact, that the border is not cropped, so it might be just a bug or some kind of bag algorythm piece.

Answer 2

by removing the z-index from #headWrapper it will work

#headWrapper {
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 0;
    left: 0;
    /*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 );
}

you can check here Full Screen JS Fiddle

JS Fiddle

check this issue on ie 9

Z-index or overflow issue, on a css menu, with gradient background in IE 9

Answer 3

Live demo

You can separate the div that will have this background from the tag that will hold the links. Here's what I mean in more details:

<div id="headWrapper"> should not be the parent of all the text because it will restrict it's height after using the filter in the internet explorer. (This seems to be a common problem and it forces the overflow to be hidden).

Therefore, just place the <div id="headWrapper"></div> as a sibling of your header tag and make both headWrapper and header to have a fixed position:

#headWrapper {... position: fixed; ...}
header {... position: fixed; ...}

and here's how the html looks like (Check my comment):

<div>
    <div id="headWrapper"></div>
    <!--Notice the headWrapper and header are siblings-->
    <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>

Please note that I've also made some random improvements to your CSS:

*{margin: 0; padding: 0;}
body {height: 1000px;}

#headWrapper    {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1eaf0',GradientType=0 );
    border-bottom: 1px solid #eee; 
    position: fixed;
    height:75px;
    width:100%;
    -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);
    }

header { width: 100%; position:fixed; }

#main {float:left;}
#main ul li a { float:left; width:100%; }
#main li ul.submenu {
    float:left;
    list-style:none;
    padding: 4px;
    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;
}

Alternative solution:

Make the gradient effect as a background image and repeat it horizontally.
Demo from w3Schools