javascript css settings

[happy2b]

I have isolated the problem to something in my javascript since I removed the javascript and tried the CSS alone. When I use the CSS alone and no javascript (and the resolution/browser happens to be the right combination) it works beautifully. The problem with the following is that when the browser is IE (Explorer) and the resolution is > 1024, the image which relies on div2 does not wind up in the right place. It's as if IE puts a small margin in there somewhere which separates div2 from nav1.

if (screen.width > 1024) {
document.write('<style type="text/css">');
	if (this.browser == 'Explorer') {
document.write('#nav2 {z-index: 5;position: absolute;right: 125px;top: 115px; margin:0px; padding:0px;}');
document.write('#div2 {margin: 0px;padding: 0px;position: absolute;top: 20px; right: 705px; Z-index: 3; } ');
	} else {
	 document.write("#nav2 { z-index: 5;position: absolute; right: 135px;top: 115px;}");
	document.write("#div2 {margin: 0px;padding: 0px;position: absolute;top: 20px; right: 723px; Z-index: 3;}");
	}
document.write("</style>");
} else { // screen width < 1024
document.write('<style type="text/css">');
 document.write("#nav2 { z-index: 5;position: absolute;right: 5px;top: 115px;}");
	if (this.browser == 'Explorer') {
	document.write("#div2 {margin: 0px;padding: 0px;position: absolute;top: 20px;left: 5px; Z-index: 3;}");
	} else {
	document.write("#div2 {margin: 0px;padding: 0px;position: absolute;top: 20px;left: 5px; Z-index: 3;}");
	}
document.write("</style>");
}

<div id="div2">
<img src="images/dion.png">

</div>
<div id ="nav2">	
	<table cellpadding = "0" cellspacing = "0" border="0">
	<tr>
		<td class="nav1"><nobr><a href="index.cfm?template=news">News</a></nobr></td>
		<td class="nav1"><nobr>Biography</nobr></td>
		<td class="nav1"><nobr>Photos &amp; Videos</nobr></td>
		<td  class="nav1"><nobr>Coaching &amp; Appearances</nobr></td>
		<td class="nav1"><nobr>Schedule &amp; Results</nobr></td>
		<td class="nav1"><nobr>Links</nobr></td>
		<td class="nav1"><nobr>Guestbook</nobr></td>
		<td class="nav1"><nobr>Contact</nobr></td>
		<td><img src="images/spacer.gif" width="15" height="40"></td>
	</tr>
</table>
</div>

Thank you in advance,

Happy2B

 

[happy2b]

Nevermind ... when I check it again without the javascript, it does appear to be a CSS issue, so I guess I'm in the wrong forum if tweaking the javascript won't make a difference. Thanks anyhow.

Happy2B