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('<div class="clearall"></div>');

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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<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;
<div id = "links"></div>

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

<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>


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:)