Invert Your Mind

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.