SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict shaxs's Avatar
    Join Date
    Sep 2005
    Posts
    267
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 Issue: Javascript menu drop down loads behind a form dropdown

    Hello All,

    We have a javascript menu on a client's site that works great in everything except IE 6. Since IE 6 still has roughly a 25% market share, we need to get it fixed. The problem is that on the side there are a few form field drop down selectors. Now when a menu item is highlighted, the drop down activates but it is loading behind the form selectors. Does anyone know a hack or way to fix this? Please see the attached.
    Attached Images Attached Images

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Setting the z-index value of the dropdown via css to one that's higher than the form selectors would do the trick.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict shaxs's Avatar
    Join Date
    Sep 2005
    Posts
    267
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Setting the z-index value of the dropdown via css to one that's higher than the form selectors would do the trick.
    Awesome. I will give it a shot. Thanks!

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Unfortunately that will not work as IE6 gives selects a zIndex that is infinite. You can't put anything in front of it.

    If you put the select in an iframe (for IE6 only) that will allow it to work since the main page is in front of the iframe content. You can't just put it in an iframe for all browsers though because Opera 8 has the same problem with iframes as IE6 has with selects.

    The simplest fix is to just make sure they never overlap. Alternatively just hide the select when you want something in front.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm having the same problem. My menu uses CSS instead of JavaScript. The menu expands on hover. How does one hide the select elements when the browser is IE6? I tried setting the display to none.

    li:hover select {display: none;}

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    IE6 only understands a:hover - no other hover options work. You need to use JavaScript to get around it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Guru D-flyer's Avatar
    Join Date
    Jan 2001
    Location
    Near a computer
    Posts
    782
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any fixes for IE6, yet

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by D-flyer View Post
    any fixes for IE6, yet
    No fixes for IE6. It is and will forever remain broken.
    Microsoft themselves are trying to push people away from IE6 towards more recent ones.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There is a fix for IE6 - it is called IE7. You don't have any control over whether people install the fix or not though.

    Unfortunately people using IE6 are a lot slower at upgrading to fix the problem that select lists display in front of everything else than Opera 8 users were to upgrade and fix the corresponding problem that browser had with iframes.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    There is a fix for IE6 - it is called IE7. You don't have any control over whether people install the fix or not though.
    And there's a fix for IE7, it's called IE 8 and man the mass migration can't come soon enough!

    Here's hoping the big push from Google and the EU finally gets MS off their butts to shut support for that piece of junk down.


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
  •