innerHTML IE problem

images not showing in IE when using innerHTML

[melissadiane]

Hi guys. This is my first time using these forums, so please excuse me if I breach etiquette.

I'm having a problem with a page I am writing. I have a bulletted list on one side, and when the user rolls over, information about the topic pops up on the right side. I'm retrieving simple html files and using Javascript innerHTML to accomplish this. Everything is working perfectly in Firefox and Opera. In Internet Explorer, I have a very strange bug. The text appears just fine, but images in the html files don't. There is just a blank space the size of the image. There's no little "can't find image" icon either, just blank space. Here's my code:

// JavaScript Document
function showtext(filename){
if (!document.getElementById) return;
if(navigator.appName == "Microsoft Internet Explorer")
document.all.large_panel_right.innerHTML=getFile(filename);
else document.getElementById("large_panel_right").innerHTML=getFile(filename);

}

function getFile(filename){
var sURL = "http://"+self.location.hostname+"/why/"+filename;

var oRequest = false;

if(window.XMLHttpRequest && !(window.ActiveXObject)) {
//alert("1");
oRequest = new XMLHttpRequest();
} else if(window.ActiveXObject) {
//alert("2");
oRequest = new ActiveXObject("Msxml2.XMLHTTP");
}

if(oRequest) {
oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("User-Agent",navigator.userAgent);
oRequest.send(null)

if (oRequest.status==200) return oRequest.responseText;
else alert("Error executing XMLHttpRequest call!");

} else alert("Error initializing XMLHTTP object!");
}

I've been scratching my head on this one for a week, and I would really appreciate some help.

Can I post the website address so you guys can see what is happening? Or let me know if there is anything I can do to explain this better.

Thanks,
Melissa

[rocknbil]

Welcome aboard melissadiane,

Can I post the website address so you guys can see what is happening?

Unfortunately no [webmasterworld.com], see #13 . . . but kudos for at least asking, most don't. :-)

Look at this.
if (!document.getElementById) return;

So if document.getElementById is not supported, it does nothing, then your code goes on to do a browser ID:

if(navigator.appName == "Microsoft Internet Explorer")......

document.all is really only needed for older (4.0?) IE browsers. Try just doing this:

function showtext(filename){
if (!document.getElementById) return;
document.getElementById("large_panel_right").innerHTML=getFile(filename);
}

Second, play around with this line:

var sURL = "http://"+self.location.hostname+"/why/"+filename;
alert(sURL);

It might not be working as expected, the alert should tell you if it's getting a valid path for all browsers.

Possibly related, possibly, not, make sure your document is rendering in standards compliance mode (valid doctype, validate via the W3c validator.)