IE7 and appended elememnt styling issue

[gerudo]

Hello and thank you in advance for your answers.

I came across a multi level dropdown javascript code that liked and wanted to implement, which can be found at http://www.leigeber.com/2008/11/drop-down-menu/.

I am pulling the navigation links from a database and dont know how many sublevels there will be so i had to use javascript in order to add to nodes to achieve this (since im using asp and not .net)

I created a script that works perfectly in IE8, FF, and Chrome. It even works in IE 7, but, this is where the problem comes, in the UL and LI elements are not styled in IE 7. However if i alert the class attribute of my main UL element it is correctly assigned, which is supposed to "main". Below is my javascript and html. Did i miss anything or is there no way to style an appended element? Any help would be great, Thanks.

here is a link to the page
http://new.jewels2000.com/jewelsadmi...mplate_2_0.asp

<style>
ul.menu {list-style:none; margin:0; padding:0; height:50px; }
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#1c314e; text-decoration:none; height:34px;}
ul.menu li {position:relative; float:left;}
ul.menu ul {position:absolute;top:32px; left:10px; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; min-width:148px; width:100%; background-image:url(/jewelsadmin/adminImages/dropmenubg.png); background-repeat:repeat-x; top:1px; }
ul.menu ul li a {display:block; padding-left:10px; padding-right:15px; text-indent:0px; height:30px;}
ul.menu ul li a:hover {color:#FFF;}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {width:134px}
ul.menu .sub {background:url(images/arrow.gif) 95% 8px no-repeat}

</style>
<!-- Holder for Navigation Links, will be generated by javascript -->
<!-- End Holder for Navigation Links, will be generated by javascript -->
<div id="navLinks">
</div>
<script language="javascript" type="text/javascript">

function initDropdown(aryNav, divID) {
	var aryTemp = new Array();
	var tempString = new String;
	var menuDiv, menuUl;
	var ii, numChildren = 0;
	var newUl, newLi, aElement;
		
	if (document.getElementById(divID) != null){	//Have to check if the divID holder exists
		//stores menu div element
		menuDiv = document.getElementById(divID);
		//creates the main UI element
        menuUl = document.createElement("UL");
		
		//assigns class and id to main UI element
		menuUl.setAttribute("class","menu");
		menuUl.setAttribute("id","menu");
		
		//add main UI element to passed divID element
		menuDiv.appendChild(menuUl);
		
//Loop through each element of the passed array object
        for (ii = 0; ii < aryNav.length; ii++) {
            newLi = document.createElement("LI");		//every link is put into a li element so we must creat a new li element each loop
            aElement = document.createElement("A");		//every link is put into an anchor element so we must creat a new anchor element each loop
            tempString = aryNav[ii];					//put navigation string into a strip objec to be split into an array
            aryTemp = tempString.split(";");			//split navigation string into an array because they are easier to work with
	
			// 0 = main navigation and is treated differently
            if (aryTemp[3] == 0) {
                newLi.setAttribute("id", "li" + aryTemp[0]);	//assigns and id to the li element to be accessed by children elements

                menuUl.appendChild(newLi);						//adds li element to main UI element
                
                aElement.setAttribute("class", "menulink");		//since we are dealing with parent elements we must assign the menulink class to the ancher element
                aElement.setAttribute("href", aryTemp[2]);		//assign the link given
                aElement.setAttribute("id", "a" + aryTemp[0]); 	//assigns an id to the element to be accessed by children elements

                newLi.appendChild(aElement);					//adds anchor element to li element
                document.getElementById("a" + aryTemp[0]).innerHTML = aryTemp[1];	//since anchor tags act like spans we much change the inner html of the tag to the navigation name
            }
            else {//handles children navigation links
                numChildren = document.getElementById("li" + aryTemp[3]).childNodes.length;		//stores the number of child elements in the parent li tag; will always be at least 1
                if (numChildren == 1) { //if the only element in the parent li is an anchor tag we need to add the child ui element before adding the child li element
                    newUl = document.createElement("UL");			//creates ui holder for children li
                    newUl.setAttribute("id", "ul" + aryTemp[3]);	//assigns an id to the element to be accessed by children elements
                    document.getElementById("li" + aryTemp[3]).appendChild(newUl);		//access parent li to add ui holder to
                    
					//if the class is null, meaning to a main navigation then we have to add sub class to get the arrow
                    if (document.getElementById("a" + aryTemp[3]).getAttribute("class") == null) 
                        document.getElementById("a" + aryTemp[3]).setAttribute("class", "sub");
                }
                newLi.setAttribute("id", "li" + aryTemp[0]);		//assigns an id to the element to be accessed by children elements
                
                document.getElementById("ul" + aryTemp[3]).appendChild(newLi);		//adds the child li to parent ui holder

                aElement.setAttribute("href", aryTemp[2]);			//assign the link given
                aElement.setAttribute("id", "a" + aryTemp[0]);		//assigns an id to the element to be accessed by children elements

                document.getElementById("li" + aryTemp[0]).appendChild(aElement);	//adds anchor element to li element
                document.getElementById("a" + aryTemp[0]).innerHTML = aryTemp[1];	//since anchor tags act like spans we much change the inner html of the tag to the navigation name
            }
        }
	}
	else
		document.write("The element " + divID + " does not exist yet."); //Tells the developer why the navigation didn't initialize
}



    // create javascript array
    var aryNav = new Array();
    aryNav[0] = "1;Settings;link1;0" //"Nav ID; Nav Name; Nav Link; Parent ID"
    aryNav[1] = "2;Login;link2;0" 
    aryNav[2] = "3;Configuration;link3;1" 
    aryNav[3] = "4;Settings;link4;1"

	//calls function to create javascript dropdown based on aryNav		
	//must call function after array is created to prevent navigation lag and screen flicker
	//pass the array object, and div id you wish to initialize under
	initDropdown(aryNav, "navLinks");




</script>

[molendijk]

Replace all occurrences of bla.setAttribute("class","some_class") with: bla.class='some_class'. That may help.
===
Arie Molendijk.

[gerudo]

that was it for some reason ie7 doesnt understand the setAttribute method. However it is className, not just class. Thanks for the help

[molendijk]

... it is className, not just class. Thanks for the help

Of course, you're right. Glad it works now.
===
Arie.

[jscheuer1]

In IE it's className even if you use the setAttribute() method. But that won't have the desired result in other browsers. So it's best (as already pointed out) to use:

something.className = 'whatever';

Virtually all browsers understand that.