IE positioning bug in the Image Thumbnail Viewer II

[Vagrant Logic]

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

Hello again, I have yet another question about the Image Thumbnail Viewer II.

I'll eventually have this gallery all over my site, but I figured I should get the bugs out on a single page first.

http://www.inverse-concepts.com/photos.php

It works fine in Mozilla / FireFox.
But when I load it up in IE and click on a thumbnail. It loads up in the frame just fine, but it moves all the icons down. Taking it outside of the boundries of where it should be. (Ignoring my overflow:hidden in my CSS file...)

Help please! And thanks to you people who have answered my previous posts.

[jscheuer1]

overflow:hidden

Apply it to the dynloadarea not the content area which includes the thumbs.

overflow:none

might be better

If that's no good try changing this:

<div id="dynloadarea" style="width:296px; height:152px; left: 0px; top: 0px; padding-top: 0px;"></div>
<div id="thumbs" style="width:195px; position: relative; top: -152px; left: 355px;">

to this:

<div id="dynloadarea" style="width:296px; height:152px; left: 0px; top: 0px; padding-top: 0px;display:inline"></div>
<div id="thumbs" style="width:195px; position: absolute; display:inline;">

You might need to throw a <br> or two in there someplace to get any needed line-breaks into the display.

[ddadmin]

There are several ways to fix this, though the problem is inherantly due to the way your two DIV tags are set up, and not a bug with the script per say:

<div id="dynloadarea" style="width:296px; height:152px; left: 0px; top: 0px; padding-top: 0px;"></div>
<div id="thumbs" style="width:195px; position: relative; top: -152px; left: 355px;">
"
"
</div>

Firstly, I'd take out the "left: 0; top:0" attributes in the first DIV tag, and the "position: relative; top: -152px; left: 355px" attributes in the second- they don't contribute anything to the layout. From what I can tell you're trying to display the two DIVs in a side by side manner. One way would be:

<div style="width: 500px">

<div id="dynloadarea" style="width:296px; height:152px; float: left"></div>

<div id="thumbs" style="float: right; width:195px;">
"
"
</div>

</div>

There are many ways to do multi columns layouts in CSS. If you're not familiar with this, you may want to simply resort to table cells, and put the first div in the left cell, and 2nd div in the right cell.