#1
  1. Imagination = Limitation
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Orlando, FL
    Posts
    62
    Rep Power
    17

    Question Drop down menu compatibility issue


    I have a drop down menu that is working fine in FF 3.5 but not in IE 7. Will you please have a look at it and help me find out where the conflict is? I am thinking it is a CSS issue but it may also be a javascript issue. The menu is here:

    http://bit.ly/42iVkG

    and the menu script I used is here:

    http://bit.ly/4pvcXj

    Thank you.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    33
    Rep Power
    14
    It looks like a z-index problem. Try adding this to the .top-container styles:

    Code:
    .top-container {
        position: relative;
        z-index: 20;
    }
    Hope that helps.
  4. #3
  5. Imagination = Limitation
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Orlando, FL
    Posts
    62
    Rep Power
    17
    Thank you ralph.mason. That worked but now I am getting some sort of weird padding/margin above and beneath each li in the dropdowns. Any idea/hack to make this spacing go away? Thank you again for your help.
  6. #4
  7. Imagination = Limitation
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Orlando, FL
    Posts
    62
    Rep Power
    17
    I have uploaded an edited version:

    http://bit.ly/2Jr8mK

    Works in IE now but have a padding issue. Anyone got any tips on how to fix this? Thank you.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    33
    Rep Power
    14
    You haven't applied those styles to the test example so I can't see what you are talking about. Perhaps specify a line-height or something, or post an updated link.

    EDIT: ah, you beat me. I'll have another look.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    33
    Rep Power
    14
    Try putting an explicit width on the LIs of the drop list:

    Code:
    ul.dropdown li {
    width: 120px;
    }
  12. #7
  13. Imagination = Limitation
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    Orlando, FL
    Posts
    62
    Rep Power
    17
    Originally Posted by ralph.mason
    Try putting an explicit width on the LIs of the drop list:

    Code:
    ul.dropdown li {
    width: 120px;
    }
    That worked ralph! Haven't taken a look on IE 6 and IE 8 but I hope all is well. You got any tips for realtime crossbrowser checking. I was using crossbrowsertesting.com but it isn't free. VMWare takes to long to boot for quick testing. Any ideas? Thank you.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2009
    Posts
    33
    Rep Power
    14
    I use VMWare Fusion on my Mac, but if you are on a PC, this is recommended for testing IE:

    IE tester:
    http://my-debugbar.com/wiki/IETester/HomePage

    And here's an article that disucsses other options:
    http://justfreetemplates.com/blog/2009/09/18/7-ways-to-check-cross-browser-compatibility.html

IMN logo majestic logo threadwatch logo seochat tools logo