Winnipeg Web Design

IE Filter Bug When Using Creating CSS3 Gradients

 

Well it has been awhile since I have posted on this blog. I would love to be posting more, but my hectic work schedule isn’t allowing me much time at all.

Well enough of that. Today I am going to help you figure out how to fix an annoying little ie bug. If you haven’t already checked out my ie z-index bug page, do it now.

The Problem

Most of you by now I am guessing have started to implement CSS3 gradients in your projects instead of repeating background images. If not, I suggest you check out this handy css3 generator that converts an image into its very own CSS3 gradient.

Now in my example, I have a navigation bar that is using a CSS3 gradient, and then I also have an active state for a link that expands outside of the navigation’s boundaries. See below:

The following is the HTML code I used:

<div id="global-nav">
  <ul>
    <li><a href="index.html" class="active">Home</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div>

and the import CSS relevant to our issue:

#global-nav ul {
    background: #d2d6da; /* Old browsers */
    background: -moz-linear-gradient(top, #d2d6da 0%, #c9ccd1 21%, #a1a3a7 75%, #95979a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2d6da), color-stop(21%,#c9ccd1), color-stop(75%,#a1a3a7), color-stop(100%,#95979a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* IE10+ */
    background: linear-gradient(top, #d2d6da 0%,#c9ccd1 21%,#a1a3a7 75%,#95979a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d6da', endColorstr='#95979a',GradientType=0 );

   height:54px;
   line-height:54px;
}
#global-nav li {
    display: inline;
    float:left;
}
#global-nav a.active {
    margin-top: -12px;
    background: url(../images/active-bg.png) no-repeat;
}

So in this case everything would look great except IE. Here is what would show up in IE:

The Solution

As you can see our nice overlapping feature is cut-off. To me I thought I must have assigned “overflow:hidden” to the ul as that is what it looks like. Turns out that is not the issue.

All you have to do to fix this error is remove the following line of CSS:

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d6da', endColorstr='#95979a',GradientType=0 );

Now the problem is that you will not have your nice CSS3 gradient in IE, but in some cases the overlapping if more crucial to the design. Don’t ask me to explain why filter does this. Filter works great until you have to push out of the boundaries.

If you have any better solutions/fix for this issue, please let me know in the comments.