Sep 202011
 

Today I found a bug in the IE rendering engine that revolves around IE positioning and using filter’s to handle gradients. My issue was that I had a navigation component that contained a drop-down menu. These drop down menus weren’t showing up in IE for some reason. After many hours of debugging, I traced it back to a gradient I was using on the navigation element using IE’s filter definition.

Here is the rough HTML:

The CSS that was failing looked something like this:

The issue with IE 8 (and probably IE 9) is that the gradient definition of:

caused the drop-down menus to not show up correctly. After moving them around and using some visibility magic, I found that the drop-downs were actually getting clipped inside the outer UL element. Once I removed the filter it all worked fine.

  12 Responses to “IE filter gradient and positioning bug”

  1. Hi, it was so hard… but i made one hack :D

    .main-nav {
    background: #e5e6ec; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fffff), color-stop(100%, #e5e6ec)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* IE10+; */
    background: linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* W3C; */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffff', endColorstr = '#e5e6ec', GradientType = 0); /* IE6-9 */

    background-image: url('/');
    background-repeat: repeat;
    }

    you can see the last 2 rows,

    background-image: url(‘/’);
    background-repeat: repeat;

    • Sorry the 2 rows must be at the start to works in ff ;)

      .main-nav {

      background-image: url('/');
      background-repeat: repeat;

      background: #e5e6ec; /* Old browsers */
      background: -moz-linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fffff), color-stop(100%, #e5e6ec)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* Opera11.10+ */
      background: -ms-linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* IE10+; */
      background: linear-gradient(top, #ffffff 0%, #e5e6ec 100%); /* W3C; */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffff', endColorstr = '#e5e6ec', GradientType = 0); /* IE6-9 */
      }

  2. I also faced this problem today

  3. Hi..
    There is another fix for this.
    Add z-index: auto to .main-nav

  4. Hi Brian,
    This issue has been a pain for me for a long while, typical designs I have to build, have to have gradients that can grow and or shrink with depending on the CMS output and such I have found drop down navigation the greatest problem when using background grads and filters.

    I have tested the solutions above and z-index fix works well for ie9+ however, ie7 and ie8 still require the filter to be removed from the rule, and thus forcing me to fall back to a solid colour. Not ideal but at least its some progression, and its also nice to know im not the only one struggling with this.

    Thanks
    Geoff Moore

  5. Thanks for posting this problem / solution. I was messing with z-index and couldn’t get it to stack over the gradient, but z-index auto worked for me (IE9+).

  6. Thanks for this! Sorted my issue!

  7. It works fine on input (IE9) but not on select. Someone know how to make gradient works on select ? thanks

  8. I used to be suggested this blog through my cousin. I’m not
    positive whether this publish is written through him as no
    one else realize such precise about my problem. You are wonderful!
    Thanks!

  9. Who do you want to gift for best cheap jerseys from china?
    Get value into the page: cheap jersey store

  10. oh my god could one of these carbon neutral tiny houses be more than a proof of fucking concept? i do not give a nanoshit about your architecture school

 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">