/    Sign up×
Community /Pin to ProfileBookmark

CSS Image positioning issue – VERY STRANGE!

Copy linkTweet thisAlerts:
Jul 08.2010

Hi Guys ?

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

[url]http://www.kentculturalbaton.com/artistgallery/whitstable.html[/url]

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

to post a comment
CSS

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLAJul 08.2010 — 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.
Copy linkTweet thisAlerts:
@MadManMcCannauthorJul 08.2010 — 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.
Copy linkTweet thisAlerts:
@KDLAJul 08.2010 — The gallery is not appearing, and the <div> upon viewing the source has no contents. ???
Copy linkTweet thisAlerts:
@MadManMcCannauthorJul 08.2010 — 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 :-)
Copy linkTweet thisAlerts:
@KDLAJul 08.2010 — Try adding:
<i>
</i>.slideshow {
display: block;
position: relative;
z-index: 0;
[B]clear: both;[/B]
}
Copy linkTweet thisAlerts:
@MadManMcCannauthorJul 08.2010 — OK tried that, with no luck :-(
Copy linkTweet thisAlerts:
@MadManMcCannauthorJul 08.2010 — 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???
Copy linkTweet thisAlerts:
@adamouJul 09.2010 — It looks really nice though! Doesn't seem off to me?
Copy linkTweet thisAlerts:
@MadManMcCannauthorJul 09.2010 — 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...
Copy linkTweet thisAlerts:
@adamouJul 09.2010 — 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
Copy linkTweet thisAlerts:
@MadManMcCannauthorJul 09.2010 — 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 :-)
Copy linkTweet thisAlerts:
@adamouJul 11.2010 — did you guys fix it? I can't get it to bug up anymore, what was the issue?
Copy linkTweet thisAlerts:
@MadManMcCannauthorJul 12.2010 — 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 :-)
×

Success!

Help @MadManMcCann spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...