CSS Image positioning issue - VERY STRANGE!

[MadManMcCann]

Hi Guys

So please can you take a look at the following page (still under construction!!)

http://www.kentculturalbaton.com/art...hitstable.html

You may notice that the first load of each image (pulled direct from Flickr) shifts the main image out of position. Once you click another thumbnail then go back to the original the image sits where it is should be!! WIERD!!

Inspected first time - WRONG!
<img width="500" height="276" src="http://static.flickr.com/4071/4645135791_a269decf71.jpg" style="display: block; position: absolute; z-index: 0; height: auto; visibility: visible; width: auto; left: 230px; top: 173px; opacity: 1;" alt="beach_flags_with_traffic_wardens">

2nd time - Left & top are correct:
<img width="500" height="276" src="http://static.flickr.com/4071/4645135791_a269decf71.jpg" style="display: block; position: absolute; z-index: 2; height: auto; visibility: visible; width: auto; left: 30px; top: 62px; opacity: 1;" alt="beach_flags_with_traffic_wardens">

Anyone got any ideas??

Also this page just will not work in IE6 (I know, it's the client!)

Many thanks in advance :-)

McCann

[KDLA]

I'm guessing it's a clearing problem related to your nav bar. Try clearing the image - I can't give you specifics because your page just became inaccessible.

[MadManMcCann]

Thx so much for looking, so we have been breaking this page and fixing it back up all day and night. So we are now working on another test copy, so this page that I originally linked is back up for you to poke at again :-) if you all don't mind that is?

Very greatful for any ideas help or suggestions.

[KDLA]

The gallery is not appearing, and the <div> upon viewing the source has no contents. ???

[MadManMcCann]

OK, so we are building this up with JavaScript. I have just checked again and the gallery now loads in Firefox, we have issues with IE6 but 7 & 8 should now work. Cache perhaps?
Thanks again for looking :-)

[KDLA]

Try adding:

.slideshow {
	display: block;
	position: relative;
	z-index: 0;
clear: both;
}

[MadManMcCann]

OK tried that, with no luck :-(

[MadManMcCann]

SOME SUCCESS!!!!! So we have managed to get the images pulling from our Flickr resource....NOW the image positioning that we get from the JS calculation is off, depending on the current image size and the image that you are viewing next....

Any ideas???

[adamou]

It looks really nice though! Doesn't seem off to me?

[MadManMcCann]

Thanks for that adamou :-) If you toggle between images you may notice that the image jumps around, I now know that this is because of the start location of the first image (as in the co-ordinates), I just do not know how to resolve it...

[adamou]

hum well the only issue with image location is when you click on play but if you browse on the bottom and click on the iamges there, everything comes up fine.

I tried following the code but its a bit hard to concetrate atm I'll try go through it later on

[MadManMcCann]

Thanks again for looking :-) Try toggling between the last three images (gold bar, tree and girl) you will see the problem better there. Let me know what you think :-)

[adamou]

did you guys fix it? I can't get it to bug up anymore, what was the issue?

[MadManMcCann]

Hi Adamou :-)

Thanks for checking again on this.
We have managed to get it working really well now...BUT...this doesn't work in IE6!!!! :-(
We have tried everything but just can't get IE6 to work with or load up the Ajax.

Any ideas are always welcome :-)