SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Location
    Kuala Lumpur, Malaysia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    #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. #4
    SitePoint Member
    Join Date
    Jan 2006
    Location
    Kuala Lumpur, Malaysia
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •