Geek Answers Handbook

Internet Explorer 9 Gradient Filter Disables Submenu

I have a strange problem with Internet Explorer 9. The CSS Filter graphical editor disables my submenu. For example, here is JSFiddle . The following 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 mine #headWrapper, my menu works as expected. With a gradient there, I can only see the border, and it cuts off anything beyond the actual height of the headers.

  • Why is this happening?
  • How can I fix it?

IE Emulated Browser Shots, , , , ( Browser Shots , ). , , /z-, .

+4
3

div, , . :

<div id="headWrapper"> , Internet Explorer. (, , , ).

<div id="headWrapper"></div> headWrapper, :

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

HTML- ( ):

<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>

, 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;
}

:

.
w3Schools

+2

z- #headWrapper,

#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 );
}

JS Fiddle

JS Fiddle

, .. 9

Z- css IE 9

0

, , :

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

#headerDummy , , :

#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 );
}

, , , , :

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

: http://jsfiddle.net/16qchfc6/22/

, , , , IE, ,

, IE9 Win7 :

enter image description here

Accepting the fact that the border is not cropped, so it may just be a mistake or some kind of algorium bag.

0
source

More articles:


All Articles