I have an odd and frustrating issue with FF only. For once IE is behaving it seems.

It is to do with Image loading and the space allocated to the image before the page finishes loading. Perhaps this is related to the space required to display the ALT tag, perhaps not.

To duplicate this problem try to following.
In FF go to http://www.famousfriends.co.uk/picture/387/
The more photo thumbs line up vertically under the main photo.
Now hit reload.
The more photo thumbs line up as desired alongside the main photo.
Clear cache and repeat.

It is clear the problem only occurs on first page load. It is not restricted to that product either. There is enough space to display the more photo thumbs without any clashes.

The problem does not repeat on IE.

I cannot set width and height attributes on the image tags or CSS since the images are generated via thumb nail program and adjust to keep the aspect ratio (ie some are landscape some are portrait).

So I am stumped as to what CSS attributes to target and where to look to tackle this odd problem.

The full CSS files are linked to from the test page.
There is a example screen capture of the problem on linked to on the test page.

Hope someone can help me sus this one out.

MattyUK

MattyUK

05-17-2005, 01:24 PM

I am wondering if to take a step back to tables to resolve this issue. :(

Anyone any thoughts?

rmedek

05-18-2005, 03:04 AM

I had a similar problem... you'll have to declare height and width of the images from somewhere...

How about nesting all images within a div that has explicit width? Then you could position that div and not worry about the images inside. Just a thought...

MattyUK

05-18-2005, 02:39 PM

How about nesting all images within a div that has explicit width? Then you could position that div and not worry about the images inside. Just a thought...

That will cause some problems as I want to retain a fluid'ish layout. i,e, the ability to change the container width and have the content adjust with no further intervention. However this will be easier to deal with than the thumbs lining up as they are. Thanks.

Is this a bug? Have you a link to any other information on this. Curious as to why the div with width approach resolves it.

Cheers.

MattyUK

05-19-2005, 06:22 PM

Well it still has me stumped? Any one else any ideas?

canadianjameson

05-19-2005, 06:43 PM

I can't seem to find it... so i'll just cheer you on :D

canadianjameson

05-19-2005, 06:44 PM

you know, if you did use tables you could do it in CSS and it might satisfy your want for a fluidic page whilst fixing the problem

canadianjameson

05-19-2005, 06:47 PM

you know matty... if you wanted to use a bit of javascript i think a preload or postload script might help you... would you want to do this or are you keen on finding the CSS solution?

it almost seems to me that the problem resides in the order in which the objects on the page are rendered. its like they are initially just set randomly and THEN as the page loads the code it starts sorting out the respective positions of each picture

canadianjameson

05-19-2005, 07:00 PM

ahhh i see the problem now... and i don't think CSS will help this one out.

I think you have 2 options... either get a javascript which will get the height & width of the image being loaded into the img tag... and set its width & height accordingly using variables (somewhat complicated as you may imagine...)

orrr, just create the thumbnails yourself using a program like photoshop 7 which has a checkbox for "constrain proportions"... which basically makes thumbnails with the same proportions as the original...

if you need a program like photoshop 7... *cough*PM me*cough*

MattyUK

05-20-2005, 12:20 AM

Hi

Thanks I set a container width after all and resolved the issues. I'd forgotten about one tag they were all contained in. Once a width was set, no problems.

Is this a bug? Have you a link to any other information on this. Curious as to why the div with width approach resolves it.