SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE7 getElementById Bug

    I am using the following code where 'BrandList' is the ID of an unnumbered list.

    Code:
    var list = document.getElementById("BrandList");
    In all browsers beyond IE7, this fills the variable 'list' with [object HTMLUListElement] and I can target the list items using list.childNodes[x].

    However, in IE7 the code above fills the variable 'list' with nothing.

    Please help!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Most commonly IE7 gets hung up due to other other issues that the page has.

    Please link to the page that is having the trouble, or at least provide a test HTML page that demonstrates the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page with the issue can be found at http://www.simplyshoes.ca.

    Its the navigation on the left-hand side "Browse by brand". You can see the hover-effect. This is implemented using JavaScript.

    This is where we are having the issue with IE7.

    Thanks

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by w1nk5 View Post
    Its the navigation on the left-hand side "Browse by brand". You can see the hover-effect.
    IE7 is getting stuck due to invalid HTML code.

    UL elements can not directly contain DIV elements. Only LI elements can be there.

    Code:
    <ul id="BrandList">
        <li><a href="#" ...>Aetrex</a></li>
        <div id="branmenu121" ...><ul>...</ul></div>
        <li><a href="#" ...>Birkenstock</a></li>
        <div id="branmenu101" ...><ul>...</ul></div>
        ...
    </ul>
    What's the solution? Validation. Validate your HTML code to ensure that there are no syntax errors. Then write your JavaScript so that it works with that validated code.

    In this case, that means placing the DIV sections inside the LI sections

    Code html4strict:
    <ul id="BrandList">
        <li><a href="#" ...>Aetrex</a>
            <div id="branmenu121" ...><ul>...</ul></div>
        </li>
        <li><a href="#" ...>Birkenstock</a>
            <div id="branmenu101" ...><ul>...</ul></div>
        </li>
        ...
    </ul>

    and using some appropriate scripting code based on that correctly structured HTML code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Or to simplify the code a bit better, this:

    Code html4strict:
    <ul id="BrandList">
        <li><a href="#" ...>Aetrex</a>
            <ul id="branmenu121" ...>...</ul>
        </li>
        <li><a href="#" ...>Birkenstock</a>
            <ul id="branmenu101" ...>...</ul>
        </li>
        ...
    </ul>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Zealot w1nk5's Avatar
    Join Date
    Aug 2009
    Location
    Ontario, Canada
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot. This is actually a client's client's website I was just trying to help them fix this bug.

    You're definitely right tho.

    Thanks again!


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
  •