IE7 getElementById Bug

JavaScript
1

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


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.

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

Please help! :slight_smile:

2

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.

3

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

IE7 is getting stuck due to invalid HTML code.

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


<ul id="BrandList">
    <li><a href="#" ...>Aetrex</a></li>
    [color="red"]<div id="branmenu121" ...><ul>...</ul></div>[/color]
    <li><a href="#" ...>Birkenstock</a></li>
    [color="red"]<div id="branmenu101" ...><ul>...</ul></div>[/color]
    ...
</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


<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.

5

Or to simplify the code a bit better, this:


<ul id="BrandList">
    <li><a href="#" ...>Aetrex</a>
        <ul id="branmenu121" ...>...</ul>
    </li>
    <li><a href="#" ...>Birkenstock</a>
        <ul id="branmenu101" ...>...</ul>
    </li>
    ...
</ul>
6

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!