Overlapping Images Don't Work In Ie

[jimbwayne]

Hey folks. I'm sure this is an easy fix, but I'm a bit of a novice with cross-browser stuff. Can anyone tell me why these overlapping thumbnails are all out of whack in IE? I used absolute positioning on 'em, and I have a feeling that's what is throwing things off for IE browsers.Here's the link:http://jimbwayne.com/kdtest/commercial.html...and the code, just for the top half of the page (had to do it as a table. The main image is at the top of the code, and the absolutely positioned thumbnail toward the bottom):<table width="960" cellpadding="10" cellspacing="0" border="0"><tr><td colspan="3" align="center" valign="top"><h1>COMMERCIAL DESIGN/STAGING</h1><br /><h2>Use elements of design to help you succeed</h2></td></tr><tr><td width="650" valign="top"><div class="imgLeft"><img src="images/krisweb/interior_20090917_017.jpg" width="600"></div><div class="caption">"Kris took the time to listen to my needs and came up with many options in my budget to create a unique space. As an artist myself, I had a concept of how I wanted my place to look, but I had no idea how to implement it. It’s a difficult space to fit everything and I was blown away by what Kris came up with. I get compliments everyday about how inviting the space is and am extremely happy with how it came out."</div><div class="credit"><b>Mark Brown</b><br />Owner, Mark Brown Photography Studio</div><img src="images/krisweb/studio037RG.jpg" width="" height="200" border="1" style="position: absolute; top:540px;left:720px;"></td><td width="310" valign="top"><br /><br /><div class="imgHead"><img src="images/commercial.png"></div><br /><br /><div align="center"><h6>Consult on-location</h6><h6>Get your business noticed</h6><h6>Build your image with design</h6><h6>Design welcoming color palettes</h6></div></td></tr></table>Any help at all would be much appreciated. Any way to fix this without starting from scratch?Many thanks.Jim

[jeffman]

Doesn't work so much on either of the two Macs I tried either.The problem seems to be your mixture of relative positioning (the table) with absolute positioning. The mixture is bound to cause trouble.My monitor is 1600px wide, and when I drag the window corner to resize it over your page, the effect is just horrible. The two smaller images stay put, of course, while the table slides around under them.So I doubt what you're experiencing is so much a Mac/PC thing as it is a consequence of different monitor resolutions. And you cannot control that. With few exceptions, we recommend against absolute positioning, for just this reason.Yeah, my first recommendation is to start from scratch, getting rid of the table.If you don't have time for that, dump the absolute positioning. Find a way to position the images inside your table cells.