SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Location
    St-Bruno, Québec, Canada
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript book dropdown menu and IE7

    Hi,

    I've been using the script (dropdownMenu.js) that's found in the JavaScript Anthology book for a while and it was working fine.

    Now when using IE7, the second sub level popup menu first appeared with a large offset to the right of it's parent.

    I've been able to edit the menu script to identify IE7 and have the menu appear at the appropriate location but I'm still left with two more problems.

    - The first sub level menu links appears above the second sub level menu.
    - I get a stack overflow when moving the cursor back onto a parent menu.

    Any idea where could I get a copy of the script that works with the latest browser versions? Maybe the CSS needs to be modified as well?


    Regards,
    Raymond
    Raymond Bissonnette`
    http://www.formedia.ca

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One of the first things that I noticed about the drop menus on some of my existing sites was that the offsets had changed. This was down to IE7 dealing with the !important declaration correctly. Due to browser differences, I had specified different offsets for non-IE v IE browsers differently by declaring the same value twice, but the first time with the !important declaration.

    If this is your problem, then here's how I got around it temporarily:

    This:
    Code:
    #myDrop{
       position: absolute;
       left: 10px !important;  /* non-IE */
       left: 20px;  /* IE only */
     }
    Becomes:
    Code:
    #myDrop{
       position: absolute;
       left: 10px;  /* non-IE */
       left: 20px !important!;  /* IE only */
     }
    Note the trailing exclamation point in the second example and bear in mind that this isn't standards-compliant and should be replaced as soon as you can:


    Andy
    From the English nation to a US location.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,597
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    You should move any specifa IE6 and IE7 stylesheet entries into separate stylesheets and use IE conditionals in the HTML to determine which browser it is so as to include them.

    <link rel="stylesheet" href="master.css" type="text/css">
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="ie6.css" type="text/css">
    <[endif]><[if IE 7]>
    <link rel="stylesheet" href="ie7.css" type="text/css">
    <[endif]-->
    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="^$">

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awestmoreland, please, please do not recommend CSS hacks that don't validate, especially ones that haven't been thoroughly tested.

    I just ran some tests and found out that in addition to IE4-7/Win, NS6.0-7.1, Safari, and Konqueror apply that hack. It causes Opera to totally ignore the rule. Using it is an extremely bad idea.

    I second Stephen's recommendation of conditional comments.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Stephen, that did the trick nicely.

    Am I right in thinking that the entire rule is replaced and in doing so drops any values not specified in the browser-specific rule?

    For instance, I have the following in my global stylesheet:
    Code:
    #myDiv{
        position: absolute;
        left: 100px;
        top: 100px;
      }
    And in my IE-specific stylesheet (referenced after the global stylesheet):
    Code:
    #myDiv{
        left: 50px;
         top: 50px;
       }
    This seems to "lose" the position: absolute property when viewing in IE.


    Thanks,

    Andy

    Edit: Just realized that this is way outside the scope of this question and in the JS forum. I'm happy to re/move it if required.
    From the English nation to a US location.

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The whole rule should not be overridden. Just the declarations that have different values.

    Could you post a link to the page in question?

    Yes, this thread would be more appropriate for the CSS forum.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •