blogjunkie — 2013-07-17T03:35:13-04:00 — #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!
francky — 2013-07-17T08:59:59-04:00 — #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.
paulob — 2013-07-17T09:27:39-04:00 — #3
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.
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.
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.
blogjunkie — 2013-07-17T20:21:22-04:00 — #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