Help! Superfish drop down getting chopped off in IE9 position: fixed

HTML & CSS
1

Here’s my site: www.businesscircle.com.my

div#header has a position:fixed; layout. On the nav menus, I use Superfish to implement the drop downs. Unfortunately in IE9 and below, the drop down doesn’t extend past div#header. Setting div#header to position:static; fixes the problem but messes out the layout.

Appreciate any suggestions on how to solve this please. Thanks!

2

I cannot test over here, but maybe:

  • Give the <div id=“wrap”> a relative position, and a z-index of 1.
  • Give the <div id=“subnav”> (has already a relative position) a z-index of 1.
  • Five the <div id=“inner”> a relative position, and a z-index of 1.

Now the (sub)menu and the rest have a common ancestor with a z-index, and the relative higher z-index of the (sub)menu should do it.

Hope it helps.

3

Hi,

It’e not a z-index issue as such although it does play a part; it’s the filter you’ve used for IE to mimic a linear gradient which stops any content escaping from the header.

There is no fix apart from using a background image for ie instead of the filter.

Edit:

Although you could remove the filter from the positioned element to an inner element instead which has no positioning applied and I belive that would work although I haven’t tested it yet.

If you switch the filter off the menu appears.


#header{filter:none!important}

Using the IE filters is always fraught with danger and I advise against using them for things like linear gradients unless its on small self contained elements.

4

Thank you Paul! Wasted my time thinking it was a z-index issue. You sir are a IE-bug whisperer!

Thanks also Francky, appreciate you taking the time to look into my problem too :slight_smile: