IE filter gradient and positioning bug

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:

<div class="main-nav">
  <ul>
    <li class="level-1">
      <a href="...">Menu 1</a>
      <ul>
        <li><a href="...">Sub Menu 1.1</a></li>
        <li><a href="...">Sub Menu 1.2</a></li>
      </ul>
    </li>
    <li class="level-1">
      <a href="...">Menu 2</a>
      <ul>
        <li><a href="...">Sub Menu 2.1</a></li>
        <li><a href="...">Sub Menu 2.2</a></li>
      </ul>
    </li>
  </ul>

The CSS that was failing looked something like this:

.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 */
}

.main-nav ul {
  padding: 4px 35px 2px 35px;
  vertical-align: top;
}

.main-nav ul li.level-1 {
  display: inline-block;
  position: relative;
}

.main-nav ul li.level-1 a {
  display: inline-block;
  padding: 5px 20px 5px 0;
}

.main-nav ul li ul {
  background: #e5e6ec;
  display: none;
  padding: 0 15px 10px 15px;
  position: absolute;
  top: 29px;
}

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

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffff', endColorstr = '#e5e6ec', GradientType = 0);

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.

8 thoughts on “IE filter gradient and positioning bug”

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

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

    Like

    Reply

    1. 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 */
      }

      Like

      Reply

  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

    Like

    Reply

  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+).

    Like

    Reply

Leave a comment