A tag in document.write works in Firefox but not IE

Hello all,
I have a simple javascript on my HTML page that pulls a bunch of images onto the page and adds a URL for a page to view the larger image. When I open the page in Firefox or Safari the image clicks through to the next page just fine. If I open it in IE7, however, clicking on the images does nothing. If I right click on the image and select ‘open link’ it will go to the page, but it won’t just click to it. Does anyone have any ideas what I can do to make this work in IE?
Thanks. Oh, here is the code I am using:


<script type="text/javascript">
			var i=1;
			for (i=1;i<=12;i++) {
				document.write('<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&grimage='+i+'&cartid=%%cartid%%">');
				document.write('<div class="graph"><img src="../newstyle/images/ratcharts/sm_graph'+i+'.png" /></div>');
				document.write('</a>');
			}
			document.write('<div class="clearall"></div>');
			</script>

Maybe something like this instead.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Links</title>
<style type="text/css">
</style>
<script type="text/javascript">
// build up a string called output
var output="\
";
for (var i = 1; i<13 ; i++) {
	output += '<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&grimage='+i+'&cartid=%%cartid%%">';
	output += '<div class="graph"><img src="../newstyle/images/ratcharts/sm_graph'+i+'.png" /></div></a>\
';
}
output+= '<div class="clearall"></div>\
';
// when the window has loaded find our div with an id of links and add our HTML
window.onload = function(){document.getElementById("links").innerHTML = output;}
// If you just wanted this to go directly into the body
// document.body.innerHTML = output;
</script>
</head>
<body>
<div id = "links"></div>
</body>
</html>

Not sure if this solves your issue, but here is the generated html from the above

<body>
<div id="links">
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=1&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph1.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=2&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph2.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=3&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph3.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=4&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph4.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=5&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph5.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=6&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph6.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=7&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph7.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=8&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph8.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=9&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph9.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=10&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph10.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=11&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph11.png"></div></a>
<a href="disp.cgi?page=Info/earlydiagnosis/ratcharts_l4.html&amp;grimage=12&amp;cartid=%%cartid%%"><div class="graph"><img src="../newstyle/images/ratcharts/sm_graph12.png"></div></a>
<div class="clearall"></div>
</div>
</body>

RLM

You shouldn’t have <div> tags inside <a> tags. Try replacing them with <span>

You shouldn’t have <div> tags inside <a> tags. Try replacing them with <span>

I had a feeling it wasn’t right and was thinking why not just add the id inside of the img tag instead. I should have checked.

The <div> is a block element and the <a> tag is an inline element. You should’nt put a block element inside an inline element. That’s right isn’t it?

<span> is inline so no problem.

Ah, you guys are so smart, that’s probably what it is. I didn’t even think about the tags being in the wrong order. When I’m back at work tomorrow I will try switching the order and see if it works. Thanks!

Thanks guys, that did work. Lesson learned here: make sure your HTML is valid before putting into Javascript!

Nice one:)