Internet Explorer puts in extra space sometimes

[happy2b]

I have a javascript that detects the browser and the screen resolution of the visitor. I have tried removing the javascript and just looking at the page within Internet Explorer with a resolution greater than 1024 wide, and I get the same result, so it's not the javascript. The only part that gets messed up is div2 when the screen resolution is greater than 1024. I hardly remember where I started. It it putting in an extra space around the image that it holds.

Here are bits and pieces of the relevant code:

if (screen.width > 1024) {
document.write('<style type="text/css">');
	if (this.browser == 'Explorer') {
document.write("#div2 {margin: -3px; padding: 0px; position: absolute; top: 20px;  left: 125px; z-index:3; }");
document.write("#nav2 {z-index:6; position: absolute;right: 125px;top: 115px; margin:-3px; padding:0; display: inline-block; width: 1px; height: 1px; display: inline-block; zoom: 1; overflow:hidden;}");
	} else {
	 document.write("#nav2 { z-index: 5;position: absolute; right: 135px;top: 115px;}");
	document.write("#div2 {margin: 0px;padding: 0px;position: absolute;top: 20px; left: 11%; 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>");
}

snip .... continue

<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>
<div align="center" id="div1">
<table width="1000" border="0" cellpadding="0" cellspacing="0" style="border-left: 1px; border-right: 1px; border-bottom: 1px; border:#999999; border-style: outset; border-top: none;">

...snipped for brevity's sake ...

</table>
</div>

Everything except this magic combination of a good resolution and internet explorer everything works great. I've been pouring over posts in an effort to better understand what I'm doing, but nothing I've tried has worked yet.

Happy2B

 

[Vragabond]

You seem to be positioning all your elements absolutely relative to the viewport (the browser window). That means that the pages will only be designed for one specific resolution.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BillyRayPreachersSon]

I know this doesn't answer your immediate question, but I'm thinking there must be a better way of delivering your site than you are right now (using document.write statements is unspeakably wrong on so many levels).

Why not show us what you're trying to achieve and see if we can suggest a far neater way of getting to the same goal?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[happy2b]

I'm definitely open to suggestions. I have a photo of someone that needs to float over top of other stuff on the page including a flash video. So if you can picture a navigation bar about 1/3 of the way down the page running across the page, a flash video under that, a few other pieces of information below that ... The picture of the person for whom the site is built needs to float or appear to float and land to the left/bottom margin of the other elements.

 

[happy2b]

Oops ... hit submit before I was entirely ready. In this example (see attached PDf) is a reasonable representation of the problem I'm encountering in Internet Explorer. The person's head and shoulders are cropped so that only part of him is showing, and he's not landing in the right spot in Internet Explorer.

Thank you very much for taking a look. I'm here to learn.

Happy2B