asked on

getElementById with ie6

I want to complete a <div id="menu"> tag with an external javascript menu.js, It is okay with Firefox and Opera but not with ie (6).
Process:
1- getElementById("menu") (normally it works fine on ie6 also)
2- create a content with div, h3, ul/li tags:
element_menu1.appendChild(element_menu1_h3);
element_menu1.appendChild(element_menu1_ul);
menu.appendChild(element_menu1)
element_menu2.appendChild(element_menu2_h3);
element_menu2.appendChild(element_menu2_ul);
menu.appendChild(element_menu2)

3- call it in xhtml file:
            <div id="menu">
            </div>
            <script type="text/javascript" src="../js/menu.js"></script>

In parallel, there is a <link> toward a .css file, with style defined for id menu, h3, ul tags.
With Opera and Firefox, the generated menu fits my css content.
But with ie6, the design is the default design on ie. Just the position of the div is okay, but borders, colors, icons for list, etc are missing.

javascript code:
/********* Menu generation ************/
var menu=document.getElementById("menu");
 
///// generation of "CV and Life" Menu /////
var element_menu1 = document.createElement("div");
element_menu1.setAttribute("class", "element_menu");
var element_menu1_h3 = document.createElement("h3");
var element_menu1_h3_text=document.createTextNode("CV and Life")
 
 
// generation of the list of links of "CV and Life" Menu
var element_menu1_ul = document.createElement("ul");
 
// items of the list
var element_menu1_li1 = document.createElement("li");
var element_menu1_li1_link=document.createElement("a");
element_menu1_li1_link.setAttribute("href","cv.html")
var element_menu1_li1_text=document.createTextNode("My CV");
 
var element_menu1_li2 = document.createElement("li");
var element_menu1_li2_link=document.createElement("a");
element_menu1_li2_link.setAttribute("href","mylove.html")
var element_menu1_li2_text=document.createTextNode("My Love");
 
var element_menu1_li3 = document.createElement("li");
var element_menu1_li3_link=document.createElement("a");
element_menu1_li3_link.setAttribute("href","mydays.html")
var element_menu1_li3_text=document.createTextNode("My Days");
 
var element_menu1_li4 = document.createElement("li");
var element_menu1_li4_link=document.createElement("a");
element_menu1_li4_link.setAttribute("href","music.html")
var element_menu1_li4_text=document.createTextNode("Piano Compositions and Recording");
 
var element_menu1_li5 = document.createElement("li");
var element_menu1_li5_link=document.createElement("a");
element_menu1_li5_link.setAttribute("href","sports.html")
var element_menu1_li5_text=document.createTextNode("Sport Videos");
 
var element_menu1_li6 = document.createElement("li");
var element_menu1_li6_link=document.createElement("a");
element_menu1_li6_link.setAttribute("href","quotes.html")
var element_menu1_li6_text=document.createTextNode("Favorite Quotes");
 
var element_menu1_li7 = document.createElement("li");
var element_menu1_li7_link=document.createElement("a");
element_menu1_li7_link.setAttribute("href","websites.html")
var element_menu1_li7_text=document.createTextNode("Favorite Websites");
 
var element_menu1_li8 = document.createElement("li");
var element_menu1_li8_link=document.createElement("a");
element_menu1_li8_link.setAttribute("href","file_browser.html")
var element_menu1_li8_text=document.createTextNode("Browse my files!");
 
 
// Tree generation under "CV and Life" Menu
element_menu1_h3.appendChild(element_menu1_h3_text);
 
element_menu1_li1_link.appendChild(element_menu1_li1_text);
element_menu1_li1.appendChild(element_menu1_li1_link);
element_menu1_ul.appendChild(element_menu1_li1);
 
element_menu1_li2_link.appendChild(element_menu1_li2_text);
element_menu1_li2.appendChild(element_menu1_li2_link);
element_menu1_ul.appendChild(element_menu1_li2);
 
element_menu1_li3_link.appendChild(element_menu1_li3_text);
element_menu1_li3.appendChild(element_menu1_li3_link);
element_menu1_ul.appendChild(element_menu1_li3);
 
element_menu1_li4_link.appendChild(element_menu1_li4_text);
element_menu1_li4.appendChild(element_menu1_li4_link);
element_menu1_ul.appendChild(element_menu1_li4);
 
element_menu1_li5_link.appendChild(element_menu1_li5_text);
element_menu1_li5.appendChild(element_menu1_li5_link);
element_menu1_ul.appendChild(element_menu1_li5);
 
element_menu1_li6_link.appendChild(element_menu1_li6_text);
element_menu1_li6.appendChild(element_menu1_li6_link);
element_menu1_ul.appendChild(element_menu1_li6);
 
element_menu1_li7_link.appendChild(element_menu1_li7_text);
element_menu1_li7.appendChild(element_menu1_li7_link);
element_menu1_ul.appendChild(element_menu1_li7);
 
element_menu1_li8_link.appendChild(element_menu1_li8_text);
element_menu1_li8.appendChild(element_menu1_li8_link);
element_menu1_ul.appendChild(element_menu1_li8);
 
 
 
///// generation of "IT and Linux Distributions" Menu /////
var element_menu2 = document.createElement("div");
element_menu2.setAttribute("class", "element_menu");
var element_menu2_h3 = document.createElement("h3");
var element_menu2_h3_text=document.createTextNode("IT and Linux Distributions")
 
 
// generation of the list of links of "IT and Linux Distributions" Menu
var element_menu2_ul = document.createElement("ul");
 
// items of the list
var element_menu2_li1 = document.createElement("li");
var element_menu2_li1_link=document.createElement("a");
element_menu2_li1_link.setAttribute("href","before_starting.html")
var element_menu2_li1_text=document.createTextNode("Before Starting");
 
var element_menu2_li2 = document.createElement("li");
var element_menu2_li2_link=document.createElement("a");
element_menu2_li2_link.setAttribute("href","working_with_linux.html")
var element_menu2_li2_text=document.createTextNode("Working on a Linux OS");
 
var element_menu2_li3 = document.createElement("li");
var element_menu2_li3_link=document.createElement("a");
element_menu2_li3_link.setAttribute("href","handling_linux.html")
var element_menu2_li3_text=document.createTextNode("Handling Linux");
 
var element_menu2_li4 = document.createElement("li");
var element_menu2_li4_link=document.createElement("a");
element_menu2_li4_link.setAttribute("href","bookmarks.html")
var element_menu2_li4_text=document.createTextNode("Bookmarks");
 
var element_menu2_li5 = document.createElement("li");
var element_menu2_li5_link=document.createElement("a");
element_menu2_li5_link.setAttribute("href","handling_linux.html#making_scripts")
var element_menu2_li5_text=document.createTextNode("Making Scripts");
 
var element_menu2_li6 = document.createElement("li");
var element_menu2_li6_link=document.createElement("a");
element_menu2_li6_link.setAttribute("href","projects.html")
var element_menu2_li6_text=document.createTextNode("Personal Projects");
 
var element_menu2_li7 = document.createElement("li");
var element_menu2_li7_link=document.createElement("a");
element_menu2_li7_link.setAttribute("href","scripts.html")
var element_menu2_li7_text=document.createTextNode("Personal Useful Scripts");
 
var element_menu2_li8 = document.createElement("li");
var element_menu2_li8_link=document.createElement("a");
element_menu2_li8_link.setAttribute("href","xbox_server.html")
var element_menu2_li8_text=document.createTextNode("XBOX Server");
 
var element_menu2_li9 = document.createElement("li");
var element_menu2_li9_link=document.createElement("a");
element_menu2_li9_link.setAttribute("href","softwares.html#latex")
var element_menu2_li9_text=document.createTextNode("Latex");
 
var element_menu2_li10 = document.createElement("li");
var element_menu2_li10_link=document.createElement("a");
element_menu2_li10_link.setAttribute("href","softwares.html#image_processing")
var element_menu2_li10_text=document.createTextNode("Image Processing");
 
var element_menu2_li11 = document.createElement("li");
var element_menu2_li11_link=document.createElement("a");
element_menu2_li11_link.setAttribute("href","web_design.html")
var element_menu2_li11_text=document.createTextNode("Web Design");
 
var element_menu2_li12 = document.createElement("li");
var element_menu2_li12_link=document.createElement("a");
element_menu2_li12_link.setAttribute("href","memory_and_os.html#wine_vmware")
var element_menu2_li12_text=document.createTextNode("Wine & VMWare");
 
var element_menu2_li13 = document.createElement("li");
var element_menu2_li13_link=document.createElement("a");
element_menu2_li13_link.setAttribute("href","memory_and_os.html#partitions")
var element_menu2_li13_text=document.createTextNode("Partitions");
 
 
// Tree generation under "IT and Linux Distributions" Menu
element_menu2_h3.appendChild(element_menu2_h3_text);
 
element_menu2_li1_link.appendChild(element_menu2_li1_text);
element_menu2_li1.appendChild(element_menu2_li1_link);
element_menu2_ul.appendChild(element_menu2_li1);
 
element_menu2_li2_link.appendChild(element_menu2_li2_text);
element_menu2_li2.appendChild(element_menu2_li2_link);
element_menu2_ul.appendChild(element_menu2_li2);
 
element_menu2_li3_link.appendChild(element_menu2_li3_text);
element_menu2_li3.appendChild(element_menu2_li3_link);
element_menu2_ul.appendChild(element_menu2_li3);
 
element_menu2_li4_link.appendChild(element_menu2_li4_text);
element_menu2_li4.appendChild(element_menu2_li4_link);
element_menu2_ul.appendChild(element_menu2_li4);
 
element_menu2_li5_link.appendChild(element_menu2_li5_text);
element_menu2_li5.appendChild(element_menu2_li5_link);
element_menu2_ul.appendChild(element_menu2_li5);
 
element_menu2_li6_link.appendChild(element_menu2_li6_text);
element_menu2_li6.appendChild(element_menu2_li6_link);
element_menu2_ul.appendChild(element_menu2_li6);
 
element_menu2_li7_link.appendChild(element_menu2_li7_text);
element_menu2_li7.appendChild(element_menu2_li7_link);
element_menu2_ul.appendChild(element_menu2_li7);
 
element_menu2_li8_link.appendChild(element_menu2_li8_text);
element_menu2_li8.appendChild(element_menu2_li8_link);
element_menu2_ul.appendChild(element_menu2_li8);
 
element_menu2_li9_link.appendChild(element_menu2_li9_text);
element_menu2_li9.appendChild(element_menu2_li9_link);
element_menu2_ul.appendChild(element_menu2_li9);
 
element_menu2_li10_link.appendChild(element_menu2_li10_text);
element_menu2_li10.appendChild(element_menu2_li10_link);
element_menu2_ul.appendChild(element_menu2_li10);
 
element_menu2_li11_link.appendChild(element_menu2_li11_text);
element_menu2_li11.appendChild(element_menu2_li11_link);
element_menu2_ul.appendChild(element_menu2_li11);
 
element_menu2_li12_link.appendChild(element_menu2_li12_text);
element_menu2_li12.appendChild(element_menu2_li12_link);
element_menu2_ul.appendChild(element_menu2_li12);
 
element_menu2_li13_link.appendChild(element_menu2_li13_text);
element_menu2_li13.appendChild(element_menu2_li13_link);
element_menu2_ul.appendChild(element_menu2_li13);
 
 
 
///// Tree generation of all the menus under "menu" div /////
element_menu1.appendChild(element_menu1_h3);
element_menu1.appendChild(element_menu1_ul);
menu.appendChild(element_menu1)
 
element_menu2.appendChild(element_menu2_h3);
element_menu2.appendChild(element_menu2_ul);
menu.appendChild(element_menu2)
 
 
 
 
///// generation of "Back to Main Page" Menu /////
var element_menu3 = document.createElement("div");
element_menu3.setAttribute("class", "element_menu");
var element_menu3_link = document.createElement("a");
element_menu3_link.setAttribute("href","index.html")
var element_menu3_text = document.createTextNode("Back to main page");
element_menu3_link.appendChild(element_menu3_text);
element_menu3.appendChild(element_menu3_link);
menu.appendChild(element_menu3)
 
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '../css/design_gold.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
 
 
css code:
#menu
{
   float: left;
   width: 20%;
   margin-left: 2%;
}
 
.element_menu
{
   background-color: #000000;
   border: 3px ridge #B3B3B3;
   margin-bottom: 20px;
}
 
 
 
.element_menu h3
{    
   color: #FFE96E;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}
 
.element_menu ul
{
   list-style-image: url("../img/list-image.png");
   padding: 0px;
   padding-left: 30px;
   margin: 0px;
   margin-bottom: 5px;
}
 
.element_menu a
{
   color: #FFE96E;
}
 
.element_menu a:hover
{
   background-color: #FFE96E;
   color: black;
}

Open in new window

screenshot.jpg

SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

scrathcyboy

version 6 of IE won't support the menu code you are using. If you want that compatibility, try a simple getElementById('name') access method for the elements, without the extra code, that will work in IE6.

coder_in_nice

ASKER

Thanks Kravimir: replacing element_menu1.setAttribute("class", "element_menu");
by
element_menu1.className = "element_menu"; perfectly works, and on top of that works with Opera and Firefox.
I tested prohibiting javascript and my menu and footer desappear. I accept it because who desable javascript?? But for searching engine it bothers me. If I decide to make my website visible for google (adding metadata), will it support Javascript (will it see the links bettween pages) or not?

David S.

I, for one, use Firefox's NoScript extension (http://noscript.net/) which blocks JavaScript (which I write scripts in on a regular basis) and Flash except for domains that I specifically allow. It really annoys me if I have to enable them just to access the navigation.

If the links are generated with JavaScript, then search engines won't see them.

Michel Plungjan

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.