I have an ASP page (No need for it to be ASP, just a force of habit
)
The structure of this page is as follows:
- Click on the link at the top of the page
- The link then uses the DOM to create a set of DIV's (Looks like a navigational bar)
- The DIV's pull in XML data
The Problem:
The problem lies (Where else) with Internet Explorer. It works fine in Mozilla. Test it in Firefox (1.0.4) and you'll see what the result is supposed to look like.
If you look at it in Internet Explorer, it creates the DIV's and pulls in the XML contents, but the styles that I've applied to the DIV's via the DOM do not work? It displays in I.E simply as black text on white background?
BUT! If I open up the generated html code from Firefox's "View Selection Source" and paste it back into the page then preview in I.E - The styles applied to the DIV's work!?
It's only when the DOM creates the DIV elements that the Styles aren't applied properly?
If anyone can offer any solutions to this I would be grateful.
Also an explanation as to why it doesnt work AT ALL! in Opera (8.0)?
Many thanks
Mark (See below for all code)
Entire page code:
Code:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
Option Explicit
Response.Buffer = true
Response.Expires = -1500
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>XML Menu [Internet Explorer/Mozilla/Gecko]</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="JavaScript" type="text/javascript">
<!--
function fnImportXML() {
// Import for Mozilla (Using Object detection)
if (document.implementation && document.implementation.createDocument){
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = fnCreateMenu;
// NOTE: No brackets?
}
// Import for Internet Explorer (Using Object detection)
else if (window.ActiveXObject){
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
// The 'readyState' has a value between 1 and 4.
// 4 means that all data has been received (= onLoad).
// So if it's 4, start creating the table.
xmlDoc.onreadystatechange = function () {if (xmlDoc.readyState == 4) fnCreateMenu()};
} else {
alert('Your browser can\'t handle this script');
return;
}
// Load the XML data into the Object 'xmlDoc'
xmlDoc.load("Menu.xml");
}
function fnCreateMenu() {
var objXMLMenu = xmlDoc.getElementsByTagName('MENU');
var iMenuCounter = 0;
var iCounter;
var iSubElCounter = 0;
var iSubEl = 0;
for (iCounter=0; iCounter<objXMLMenu.length; iCounter++) {
/*
The variable "iSubmenuElements":
Outputs the number of submenu elements per 'top level' elements:
Add on note:
The "iSubmenuElements" variable produces different output for both Mozilla and Internet Explorer?
So we must change the calculation for the variable depending on the browser used.
*/
if(navigator.appName == "Netscape"){
var iSubmenuElements = (objXMLMenu.item(iCounter).childNodes.length - 1) / 2;
}
if(navigator.appName == "Microsoft Internet Explorer"){
var iSubmenuElements = objXMLMenu.item(iCounter).childNodes.length;
}
// Create the 2 different elements ("Top Level Menu" / "Sub Menu")
var objCreateRoot = document.createElement('DIV');
objCreateRoot.setAttribute('id','Menu'+iCounter);
objCreateRoot.setAttribute('style','width:130px; background-color: yellow; padding:5px 5px 0px 5px;');
var objCreateSub = document.createElement('DIV');
objCreateSub.setAttribute('id','SubMenu'+iCounter);
objCreateSub.setAttribute('style','width:120px; background-color: #CCCCCC; padding:5px;');
// Create the Paragraph elements for each parent 'menu' element.
strAttribute = objXMLMenu[iMenuCounter].getAttribute("id");
var objPara1 = document.createElement('P');
var objText1 = document.createTextNode(strAttribute);
objPara1.appendChild(objText1);
objCreateSub.appendChild(objPara1);
var strSubMenuElements = xmlDoc.getElementsByTagName("SUB");
calNum = (objXMLMenu.item(iMenuCounter).childNodes.length - 1) / 2;
iRoundElement = Math.ceil(calNum);
// Write Sub Menu (Loop to write each 'top level' elements submenus elements)
while (iSubElCounter < iSubmenuElements) {
eval("objSubPara" + iSubEl + "= document.createElement('P')");
eval("objSubText" + iSubEl + "= document.createTextNode(strSubMenuElements[iSubEl].firstChild.nodeValue)");
eval("objSubPara" + iSubEl + ".appendChild(eval('objSubText' + iSubEl))");
objCreateSub.appendChild(eval("objSubPara" + iSubEl));
iSubElCounter = iSubElCounter + 1;
iSubEl = iSubEl + 1;
}
iSubElCounter = 0;
objCreateRoot.appendChild(objCreateSub);
document.getElementById('WriteDIV').appendChild(objCreateRoot);
// Increments the counter so it loops through each top level menu
iMenuCounter = iMenuCounter + 1;
}
}
// -->
</SCRIPT>
<STYLE type="text/css">
<!--
BODY, P, TD {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
color: #000000;
text-decoration: none;
}
-->
</STYLE>
</HEAD>
<BODY>
<A href="javascript:fnImportXML();">Click here to create XML driven DIV menu (Internet Explorer/Mozilla/Gecko)</A>
<P id="WriteDIV"></P>
</BODY>
</HTML>
Entire XML code:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<ROOT>
<MENU id="TopMenu1">
<SUB>Menu 1 :: Sub Link 1</SUB>
<SUB>Menu 1 :: Sub Link 2</SUB>
<SUB>Menu 1 :: Sub Link 3</SUB>
<SUB>Menu 1 :: Sub Link 4</SUB>
<SUB>Menu 1 :: Sub Link 5</SUB>
<SUB>Menu 1 :: Sub Link 6</SUB>
<SUB>Menu 1 :: Sub Link 7</SUB>
<SUB>Menu 1 :: Sub Link 8</SUB>
</MENU>
<MENU id="TopMenu2">
<SUB>Menu 2 :: Sub Link 1</SUB>
<SUB>Menu 2 :: Sub Link 2</SUB>
<SUB>Menu 2 :: Sub Link 3</SUB>
<SUB>Menu 2 :: Sub Link 4</SUB>
<SUB>Menu 2 :: Sub Link 5</SUB>
<SUB>Menu 2 :: Sub Link 6</SUB>
<SUB>Menu 2 :: Sub Link 7</SUB>
</MENU>
<MENU id="TopMenu3">
<SUB>Menu 3 :: Sub Link 1</SUB>
<SUB>Menu 3 :: Sub Link 2</SUB>
<SUB>Menu 3 :: Sub Link 3</SUB>
<SUB>Menu 3 :: Sub Link 4</SUB>
<SUB>Menu 3 :: Sub Link 5</SUB>
<SUB>Menu 3 :: Sub Link 6</SUB>
</MENU>
<MENU id="TopMenu4">
<SUB>Menu 4 :: Sub Link 1</SUB>
<SUB>Menu 4 :: Sub Link 2</SUB>
<SUB>Menu 4 :: Sub Link 3</SUB>
<SUB>Menu 4 :: Sub Link 4</SUB>
<SUB>Menu 4 :: Sub Link 5</SUB>
</MENU>
<MENU id="TopMenu5">
<SUB>Menu 5 :: Sub Link 1</SUB>
<SUB>Menu 5 :: Sub Link 2</SUB>
<SUB>Menu 5 :: Sub Link 3</SUB>
<SUB>Menu 5 :: Sub Link 4</SUB>
</MENU>
<MENU id="TopMenu6">
<SUB>Menu 6 :: Sub Link 1</SUB>
<SUB>Menu 6 :: Sub Link 2</SUB>
<SUB>Menu 6 :: Sub Link 3</SUB>
</MENU>
<MENU id="TopMenu7">
<SUB>Menu 7 :: Sub Link 1</SUB>
<SUB>Menu 7 :: Sub Link 2</SUB>
</MENU>
<MENU id="TopMenu8">
<SUB>Menu 8 :: Sub Link 1</SUB>
<SUB>Menu 8 :: Sub Link 2</SUB>
<SUB>Menu 8 :: Sub Link 3</SUB>
<SUB>Menu 8 :: Sub Link 4</SUB>
</MENU>
<MENU id="TopMenu9">
<SUB>Menu 9 :: Sub Link 1</SUB>
<SUB>Menu 9 :: Sub Link 2</SUB>
<SUB>Menu 9 :: Sub Link 3</SUB>
<SUB>Menu 9 :: Sub Link 4</SUB>
<SUB>Menu 9 :: Sub Link 5</SUB>
<SUB>Menu 9 :: Sub Link 6</SUB>
<SUB>Menu 9 :: Sub Link 7</SUB>
<SUB>Menu 9 :: Sub Link 8</SUB>
<SUB>Menu 9 :: Sub Link 9</SUB>
</MENU>
</ROOT>
Threaded Mode
