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.
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 */
}
I also faced this problem today
Hi..
There is another fix for this.
Add z-index: auto to .main-nav
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