3

I've disabled the superfish js for now so it's pure CSS. The URL is http://pittsculture.studiotwo.com/category/outdoors-recreation/. It looks fine in FF and Chrome. But, believe it or not, IE has a problem with the dropdowns (e.g., under Outdoors and Recreation). Can anyone tell why?

lancemonotone
  • 135
  • 1
  • 12

1 Answers1

3

On #main-nav, you need to remove the filter rule. The filter is causing Internet Explorer to behave as though you have applied overflow: hidden to the element.

Now your dropdown menu works, but it's lost the gradient.

You can add the gradient back in a way that won't cause the same problem by adding the same filter you just removed to #menu-category-navigation. As far as I can tell, it looks identical.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Thanks...you're right about the filter rule being the cause of the problem. Unfortunately, if I move the filter to the underlying UL, the gradient no longer fills the width of the navigation. I just removed it altogether from IE. When will they get their act together? – lancemonotone Mar 28 '11 at 13:31
  • In IE9, you can [make gradients using SVG](http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/), which is an improvement over using the `filter` property. If you're happy with this answer, I'd appreciate it if you accepted it. – thirtydot Mar 28 '11 at 13:32
  • I'll take a look at SVG but I'm not sure it's worth it with IE's market share dwindling like it is. A gradient isn't crucial. – lancemonotone Mar 28 '11 at 14:41
  • Agreed — the filter CSS rule causes many flickering drop-down issues in ie. Thanks for the fix!!!! – Bob Gregor Nov 15 '11 at 21:10