A very DOM question

[Tarik Monem]

You guys have been very helpful. Even if the solution was not presented in the reply, then you would at least spark a thought which would lead to the solution and I am very grateful for your assistance and I require your assistance once more.

I have been working with DOM to interact with AJAX/PHP/MySQL/XML and I have it working perfectly within Safari, Firefox (linux/mac/win) and Opera, but not with IE. So, I used a conditional statement to hard code in what I wanted IE to display, but it still doesn't work properly.

I know that it must be something simple that I missing, but IE draws the info being retrieved with a black background and white text, which is the opposite effect that I am seeking. Plus, the two table datas on the sides of the incoming data are not drawing the background images either.

Here's the code:

 
            loadXMLDoc('xml/crew2.xml');
        crews = xml_doc.getElementsByTagName("crew");
        members = xml_doc.getElementsByTagName("member");
 
            if(navigator.appName == 'Microsoft Internet Explorer')
            {    
        theDiv = document.getElementById('contentHoldingDiv');
        theDiv.innerHTML = '';
        theDiv.innerHTML += '<table bgcolor=#000000 cellpadding=0 cellspacing=0>';
        theDiv.innerHTML += '<tr>';
        theDiv.innerHTML += '<td style="padding:0; margin:0;" colspan=3 valign=bottom>';
        theDiv.innerHTML += '<img src=images/crew_description_bg_tp.jpg width=560px height=43px>';
        theDiv.innerHTML += '</td></tr><tr bgcolor=#FFFFFF>';
        theDiv.innerHTML += '<td style="padding: 0; margin: 0; background-color:#FFFFFF;background-image:url(images/crew_description_bg_ls.jpg); background-repeat:repeat-y; width:15px;" valign=top width=15px align=right>&nbsp;</td>';
        theDiv.innerHTML += '<td valign=top style="font-size:10px; width:528px; background-color:#FFFFFF; color:#000000; padding:0; margin:0; white-space:inherit;">';
theDiv.innerHTML += '<p>' + members[someNumberComing].childNodes[0].nodeValue + '</p></td>';
        theDiv.innerHTML += '<td style="padding: 0; margin: 0; background-color:#FFFFFF;background-image:url(images/crew_description_bg_rs.jpg); background-repeat:repeat-y; width:17px;" valign=top width=17px align=left>&nbsp;</td>';
        theDiv.innerHTML += '</tr><tr>';
        theDiv.innerHTML += '<td style="padding:0; margin:0;" colspan=3 valign=top>';
        theDiv.innerHTML += '<img src=images/crew_description_bg_btm.jpg width=560px height=43px>';
        theDiv.innerHTML += '</td></tr></table>';
            }
            else
            {
        theDiv = document.getElementById('contentHoldingDiv');
        myTable = document.createElement('table');
        myTable.setAttribute('bgcolor','#000000');
        myTable.setAttribute('cellpadding','0');
        myTable.setAttribute('cellspacing','0');
        myTd = document.createElement('td');
        myTd.setAttribute('style','font-size: 10px; width:528px; background-color:#FFFFFF; color:#000000; padding: 0; margin: 0; white-space:inherit;');
        myTd.setAttribute('valign','top');
        myTr = document.createElement('tr');
        myTr.setAttribute('bgcolor','#FFFFFF');
 
        myTrTop = document.createElement('tr');
        myTrBottom = document.createElement('tr');
 
        //var tdHeight = document.getElementById('contentHoldingDiv').height;
        //alert(tdHeight);
 
        myTdTop = document.createElement('td');
        myTdTop.setAttribute('colspan','3');
        myTdTop.setAttribute('style','padding: 0; margin: 0;');
        myTdTop.setAttribute('valign','bottom');        
        myTdBottom = document.createElement('td');
        myTdBottom.setAttribute('colspan','3');
        myTdBottom.setAttribute('style','padding: 0; margin: 0;');
        myTdBottom.setAttribute('valign','top');
 
        myTopImage = document.createElement('img');
        myTopImage.setAttribute('src','images/crew_description_bg_tp.jpg');
        myTopImage.setAttribute('width','560px');
        myTopImage.setAttribute('height','43px');
 
        myBottomImage = document.createElement('img');
        myBottomImage.setAttribute('src','images/crew_description_bg_btm.jpg');
        myBottomImage.setAttribute('width','560px');
        myBottomImage.setAttribute('height','43px');
 
        myLeftImageTd = document.createElement('td');
myLeftImageTd.setAttribute('style','padding: 0; margin: 0; background-color:#FFFFFF;background-image:url(images/crew_description_bg_ls.jpg); background-repeat:repeat-y; width:15px;position:relative; left:2px;');
        myLeftImageTd.setAttribute('valign','top');
        myLeftImageTd.setAttribute('width','15px');
        myLeftImageTd.setAttribute('align','right');
 
        /* myLeftImage = document.createElement('img');
        myLeftImage.setAttribute('src','images/crew_description_bg_ls.jpg');
        myLeftImage.setAttribute('width','16px');
        myLeftImage.setAttribute('height','140px'); */
 
        myRightImageTd = document.createElement('td');
myRightImageTd.setAttribute('style','padding: 0; margin: 0; background-color:#000000;background-image:url(images/crew_description_bg_rs.jpg); background-repeat:repeat-y; width:17px;');
        myRightImageTd.setAttribute('valign','top');
        myRightImageTd.setAttribute('width','17px');
        myRightImageTd.setAttribute('align','left');
 
        /* myRightImage = document.createElement('img');
        myRightImage.setAttribute('src','images/crew_description_bg_rs.jpg');
        myRightImage.setAttribute('width','16px');
        myRightImage.setAttribute('height','140px'); */
 
        theDiv.innerHTML = '';
 
        theDiv.appendChild(myTable);
        myTable.appendChild(myTrTop);
        myTrTop.appendChild(myTdTop);
        myTdTop.appendChild(myTopImage);
        myTable.appendChild(myTr);
        myTr.appendChild(myLeftImageTd);
        /* myLeftImageTd.appendChild(myLeftImage); */
        myTr.appendChild(myTd);
myTd.innerHTML += '<p>' + members[someNumberComing].childNodes[0].nodeValue + '</p>';
        myTr.appendChild(myRightImageTd);
        /* myRightImageTd.appendChild(myRightImage); */
        myTable.appendChild(myTrBottom);
        myTrBottom.appendChild(myTdBottom);
        myTdBottom.appendChild(myBottomImage);
            }
 
 

Once more, this works perfectly in Safari, Firefox & Opera and, as usual, I thank you in advance. :-) Any thoughts would be most appreciated.

[acoder]

When appending children, you should work the other way round adding to the body or main containing div at the end. Maybe the fact that you're adding the table (with a black background) and then adding the rows/cells afterwards is causing the problem.

[Tarik Monem]

When appending children, you should work the other way round adding to the body or main containing div at the end. Maybe the fact that you're adding the table (with a black background) and then adding the rows/cells afterwards is causing the problem.

That is what is so strange about this situation. I had tried that, but I do not have an issue with the browsers (everything other than IE) using the DOM to create the table, for which the black background is used to make the images on the left and right side of the table to appear seamlessly, but the issue that I'm having is with the hard coded table that is being written for IE.

It actually has a black background with white text in the center td and I can not figure out why. And why is IE not drawing the side tds?

Thanks for your thoughts and please keep them coming. I think I will try something as a result of your comment.

[Tarik Monem]

OK, I was able to add a "<div>" tag with a style, rather than the "<p>" tag, followed by making the #contentHoldingDiv within my css file to have a white background, which solved my black background and white text issue.

However, the background-repeat: repeat-y; within the left and right td is still not functioning in IE.

Here's the fix of the original problem:

 
        theDiv = document.getElementById('contentHoldingDiv');
        theDiv.innerHTML = '';
        theDiv.innerHTML += '<table bgcolor=#000000 cellpadding=0 cellspacing=0>';
        theDiv.innerHTML += '<tr>';
        theDiv.innerHTML += '<td style="padding:0; margin:0;" colspan=3 valign=bottom>';
        theDiv.innerHTML += '<img src=images/crew_description_bg_tp.jpg width=560px height=43px>';
        theDiv.innerHTML += '</td></tr><tr>';
        theDiv.innerHTML += '<td style="padding: 0; margin: 0; background-image:url(images/crew_description_bg_ls.jpg); background-repeat:repeat-y; width:15px;" valign=top width=15px align=right></td>';
        theDiv.innerHTML += '<td valign=top style="font-size:10px; width:528px; background-color:#FFFFFF; color:#000000; padding:0; margin:0;">';
theDiv.innerHTML += '<div style="position:relative; left:15px; top:0px; width:528px; background-color:#FFFFFF; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size: 12px; padding:0; margin:0;">' + members[someNumberComing].childNodes[0].nodeValue;
        theDiv.innerHTML += '</div></td><td style="padding: 0; margin: 0; background-image:url(images/crew_description_bg_rs.jpg); background-repeat:repeat-y; width:17px;" valign=top width=17px align=left></td>';
        theDiv.innerHTML += '</tr><tr>';
        theDiv.innerHTML += '<td style="padding:0; margin:0;" colspan=3 valign=top>';
        theDiv.innerHTML += '<img src=images/crew_description_bg_btm.jpg width=560px height=43px>';
        theDiv.innerHTML += '</td></tr></table>';
 
 

As usual, thank you for your help. As with the last comment, it allowed me to start thinking of the solution above.