Javascript not working on IE6 or IE7 only, cross-browser problems

Hi everybody,
So I've been learning javascript and I'm using it to write a site. What I needed to do was to have some javascript code pull information from an XML file, add markers with bubbles to a google map on the page, add some tables to my page, and then put the information in the table cells appropriately to make a reference list corresponding to the markers.

I programed the google map part successfully so that it made a map and pulled the XML data to make the markers with bubbles. This much code works on ie6, ie7, firefox, and safari3 beta for mac. This is where i ran into the problem; I added the following function to make the tables and insert the data. This function is run inside my for loop that makes the markers so when a marker is made the entry on the list is also made. The code with this function works beautifully on firefox and safari3 beta (mac), but when I open the page in ie6 or ie7 the table/list is no where to be seen. I'm assuming that this is because I'm using some javascript code in the function that is not supported by Microsoft browsers?
Any help on why I'm having cross-broswer issues would be greatly appreciated.


// function for Writing the refrence table
function writeEntry (barname, linkname, typeofbar, area, address1, address2, phonenum, letter, firstHit) {

if (firstHit == 1 ) {}
else {
var dividerow = document.createElement('tr');
document.getElementById('tablewrite').appendChild(dividerow);
var dividecell=dividerow.insertCell(0);
dividecell.setAttribute('width',559);
dividecell.setAttribute('height',6);
dividecell.setAttribute('class','barnamecell');
var divideline = document.createElement('img');
dividecell.appendChild(divideline);
divideline.src = "dividerLineFadding.jpg";
divideline.setAttribute('width',461);
divideline.setAttribute('height',6);
}

var boxrow = document.createElement('tr');
document.getElementById('tablewrite').appendChild(boxrow);
var boxcell=boxrow.insertCell(0);
boxcell.setAttribute('width',559);
boxcell.setAttribute('height',138);
boxcell.setAttribute('class','ridebox');
var boxtable = document.createElement('TABLE');
boxcell.appendChild(boxtable);
var boxtableRow = boxtable.insertRow(0);
var iconcell = boxtableRow.insertCell(0);
iconcell.setAttribute('height',137);
iconcell.setAttribute('style','text-align:center;vertical-align:middle');
var icon = document.createElement('img');
iconcell.appendChild(icon);
icon.src = "googlemarkers/marker" + letter + ".png";
icon.setAttribute('width',20);
icon.setAttribute('height',34);
icon.setAttribute('style','margin-left:5px');
var textcell = boxtableRow.insertCell(1);
textcell.setAttribute('height',137);

var p1 = document.createElement('p');
textcell.appendChild(p1);
p1.setAttribute('class','eventpostingsubject');
var barnamelink = document.createElement('a');
p1.appendChild(barnamelink);
barnamelink.setAttribute('href','http://www.raleighbarhopper.com/' + linkname + '.html');
var p1text = document.createTextNode(barname);
barnamelink.appendChild(p1text);

var p2 = document.createElement('p');
textcell.appendChild(p2);
p2.setAttribute('class','eventpostingdate');
var fonttag2 = document.createElement('font');
p2.appendChild(fonttag2);
fonttag2.setAttribute('style','font-style:normal');
var p2text1 = document.createTextNode('Type of Bar: ');
fonttag2.appendChild(p2text1);
var p2text2 = document.createTextNode(typeofbar);
p2.appendChild(p2text2);

var p3 = document.createElement('p');
textcell.appendChild(p3);
p3.setAttribute('class','eventpostingdate');
var fonttag3 = document.createElement('font');
p3.appendChild(fonttag3);
fonttag3.setAttribute('style','font-style:normal');
var p3text1 = document.createTextNode('Area: ');
fonttag3.appendChild(p3text1);
var p3text2 = document.createTextNode(area);
p3.appendChild(p3text2);

var p4 = document.createElement('p');
textcell.appendChild(p4);
p4.setAttribute('class','eventpostingdate');
var fonttag4 = document.createElement('font');
p4.appendChild(fonttag4);
fonttag4.setAttribute('style','font-style:normal');
var p4text1 = document.createTextNode('Address: ');
fonttag4.appendChild(p4text1);
var p4text2 = document.createTextNode(address1);
p4.appendChild(p4text2);

var p5 = document.createElement('p');
textcell.appendChild(p5);
p5.setAttribute('class','eventpostingdate');
p5.setAttribute('style','margin-left:73px');
var p5text = document.createTextNode(address2);
p5.appendChild(p5text);

var p6 = document.createElement('p');
textcell.appendChild(p6);
p6.setAttribute('class','eventpostingdate');
var fonttag6 = document.createElement('font');
p6.appendChild(fonttag6);
fonttag6.setAttribute('style','font-style:normal');
var p6text1 = document.createTextNode('Phone Number: ');
fonttag6.appendChild(p6text1);
var p6text2 = document.createTextNode(phonenum);
p6.appendChild(p6text2);

}


I am a fairly new javascript user and so if anyone thinks that the problem is in some other part of the page let me know and I will make that available for review.

couple of points

dividecell.className='barnamecell';
is safer than
dividecell.setAttribute('class','barnamecell');


iconcell.style.textAlign='center';
iconcell.style.verticalAlign='middle';
is safer than
iconcell.setAttribute('style','text-align:center;vertical-align:middle');

Thanks for the tip, making the code more reliable is great.

I do still need help finding a fix to the cross-browser problem though if any one else has an idea.

var boxtable = document.createElement('TABLE');
boxcell.appendChild(boxtable);
var boxtableRow = boxtable.insertRow(0);
var iconcell = boxtableRow.insertCell(0);


you need a TBODY to insert the rows


I use
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}





This can create an element passing say 'TR' for a row as parameter 0
Set the style as parameter 1, insert in an element parameter 2 and add a text node with data parameter 3

example from post a script


...
for (var zxc0=1;zxc0<zxcsel.options.length;zxc0++){
zxcflag=zxcES('IMG',{position:'absolute'});
zxcflag.src=zxcsel.options[zxc0].title;
var zxccopt=zxcES('DIV',{position:'relative',left:'0px',width:'100%',height:zxcflag.height+4+'px',backgr oundColor:'#ffffff',cursor:zxccur},zxcdrop);
zxcES(zxcflag,{left:'2px',top:'2px'},zxccopt);
zxcES('DIV',{position:'absolute',left:(zxcflag.width+6)+'px',top:'2px'},zxccopt,zxcsel.options[zxc0].text);
....


makes life easier

edit
see http://www.codingforums.com/showthread.php?t=121564

Well I put the tbody tags in and the table still seems to be not appearing in ie6, I haven't been able to check 7

here's the part of the code that I changed...

var boxtable = document.createElement('TABLE');
boxcell.appendChild(boxtable);
var boxtablebody = document.createElement('tbody');
boxtable.appendChild(boxtablebody);
var boxtableRow = boxtablebody.insertRow(0);

done this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// function for Writing the refrence table
function writeEntry (barname, linkname, typeofbar, area, address1, address2, phonenum, letter, firstHit) {
var dividerow = document.createElement('tr');
var tbdy=document.getElementById('tablewrite');
var row=zxcES('TR',{},tbdy);
var cell=zxcES('TD',{},row);
cell.width=559;
row.height=6;
cell.className='barnamecell';
var divideline = zxcES('IMG',{},cell);
divideline.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
divideline.width=461;
divideline.height=6;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}
/*]]>*/
</script>
</head>

<body>
<table width="200" border="1" >
<TBODY id="tablewrite" ></TBODY>
<input type="button" name="" value="Add Row" onclick="writeEntry();"/>

</table>
</body>

</html>

do some more later

alright well it took me a sec to read through that function and understand it, but I like it because it does make writing a table more concise. I re-wrote the code using it but unfortunately I'm still having the issue of not seeing the table in ie 6 or 7.

I'm still looking for some insight from anyone, I've been working on this problem constantly and I'm not getting anywhere.

Here's the new code:

function writeEntry (barname, linkname, typeofbar, area, address1, address2, phonenum, letter, firstHit) {

if (firstHit == 1 ) {}
else {
var dividerow = document.createElement('tr');
document.getElementById('tablewrite').appendChild(dividerow);
var dividecell= elementMaker('td',{},dividerow);
dividecell.width = 559;
dividecell.height = 6;
dividecell.className='barnamecell';
var divideline = elementMaker('img',{},dividecell);
divideline.src = "dividerLineFadding.jpg";
divideline.width = 461;
divideline.height = 6;
}

var boxrow = document.createElement('tr');
document.getElementById('tablewrite').appendChild(boxrow);
var boxcell = elementMaker('td',{},boxrow);
boxcell.width = 559;
boxcell.height = 138;
boxcell.className='ridebox';
var boxtable = elementMaker('table',{},boxcell);
var boxtablebody = elementMaker('tbody',{},boxtable);
var boxtableRow = elementMaker('tr',{},boxtablebody);
var iconcell = elementMaker('td',{},boxtableRow);
iconcell.height = 137;
iconcell.style.textAlign = 'center';
iconcell.style.verticalAlign = 'middle';
var icon = elementMaker('img',{},iconcell);
icon.src = "googlemarkers/marker" + letter + ".png";
icon.width = 20;
icon.height = 34;
icon.setAttribute('style','margin-left:5px');
var textcell = elementMaker('td',{},boxtableRow);
textcell.height = 137;

var p1 = elementMaker('p',{},textcell);
p1.className = 'eventpostingsubject';
var barnamelink = elementMaker('a',{},p1);
barnamelink.setAttribute('href','http://www.raleighbarhopper.com/' + linkname + '.html');
var p1text = document.createTextNode(barname);
barnamelink.appendChild(p1text);

var p2 = elementMaker('p',{},textcell);
p2.className = 'eventpostingdate';
var fonttag2 = elementMaker('font',{},p2);
fonttag2.setAttribute('style','font-style:normal');
var p2text1 = document.createTextNode('Type of Bar: ');
fonttag2.appendChild(p2text1);
var p2text2 = document.createTextNode(typeofbar);
p2.appendChild(p2text2);

var p3 = elementMaker('p',{},textcell);
p3.className = 'eventpostingdate';
var fonttag3 = elementMaker('font',{},p3);
fonttag3.setAttribute('style','font-style:normal');
var p3text1 = document.createTextNode('Area: ');
fonttag3.appendChild(p3text1);
var p3text2 = document.createTextNode(area);
p3.appendChild(p3text2);

var p4 = elementMaker('p',{},textcell);
p4.className = 'eventpostingdate';
var fonttag4 = elementMaker('font',{},p4);
fonttag4.setAttribute('style','font-style:normal');
var p4text1 = document.createTextNode('Address: ');
fonttag4.appendChild(p4text1);
var p4text2 = document.createTextNode(address1);
p4.appendChild(p4text2);

var p5 = elementMaker('p',{},textcell);
p5.className = 'eventpostingdate';
p5.setAttribute('style','margin-left:73px');
var p5text = document.createTextNode(address2);
p5.appendChild(p5text);

var p6 = elementMaker('p',{},textcell);
p6.className = 'eventpostingdate';
var fonttag6 = elementMaker('font',{},p6);
fonttag6.setAttribute('style','font-style:normal');
var p6text1 = document.createTextNode('Phone Number: ');
fonttag6.appendChild(p6text1);
var p6text2 = document.createTextNode(phonenum);
p6.appendChild(p6text2);

}


also here's the link to the webpage since i'm starting to think that the problem could possible be outside the writeEntry function.
http://www.raleighbarhopper.com/glenwoodsouthmap%20copy.html

question for vwphillips:
what does this part of your function do?
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }

also how would I use that function to replace this code

var p1text = document.createTextNode(barname);
barnamelink.appendChild(p1text);

well ie is running the writeEntry function and the XML data is feeding through, I'm wondering if ie just doesn't like the pieces of the code that write the html elements to the page?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Example call
// zxcES('DIV',{position:'absolute',left:(zxcflag.width+6)+'px',top:'2px'},zxccopt,zxcsel.options[zxc0].text);

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; } // this adds the style zxcstyle to the element
if (zxcp){ zxcp.appendChild(zxcele); } // this appends the zxcele to zxcp
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); } // this appends a text node with a value of zxctxt to zxcele
return zxcele;
}



/*]]>*/
</script>
</head>

<body>

</body>

</html>


Suggest you test the function by calling the function from a button on click event specifying the parameters to ensure the function works before involving any other functions.

If necessary post the test code(including the HTML)

you need a Rich text editor
eg
http://www.openwebware.com/products/openwysiwyg/

Has this been resolved? I'm having the same problem (table displays in Firefox but not IE7):

// create a new table
var table = document.createElement('table');

// loop through each event in the feed
for (var i = 0; i < feed.entry.length; i++) {
var entry = feed.entry[i];
var title = entry.title.$t;
var start = entry['gd$when'][0].startTime;

var dateString = formatGCalTime(start);
var tr = document.createElement('tr');

// append the row (tr) onto the table
table.appendChild(tr);
}
events.appendChild(table);
}

I've left out the table cells for now as I just wanted to keep the code simple for this discussion, but it doesn't display in IE7 either way.

Ok I've found a fix for me. I hope it works for you. VWPhilips was right about the TBODY:

http://mypetprogrammer.com/blog/?cat=2