Img ALT allocated space. FF page render problem on first load only.

[MattyUK]

Hi

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 markup:

<table cellspacing="0" cellpadding="0" id="photodetailtable"><tr><td>
<img id="photodetail" src="/getImage/0945631.jpg" alt="Henry and Zidane" />
<strong>More photos:</strong><br />
<a href="http://www.famousfriends.co.uk/picture/379/" target="_self" title="France Training"><img class="photodetailthumb" src="/getThumb/0907809.jpg" alt="France Training" /></a><br />
<a href="http://www.famousfriends.co.uk/picture/384/" target="_self" title="Silvestre and Henry 2"><img class="photodetailthumb" src="/getThumb/0932249.jpg" alt="Silvestre and Henry 2" /></a><br />
<a href="http://www.famousfriends.co.uk/picture/385/" target="_self" title="Thierry scores!"><img class="photodetailthumb" src="/getThumb/0938421.jpg" alt="Thierry scores!" /></a><br />
</td></tr></table><br />

The relevant CSS code.

div#content table#photodetailtable {
}
div#content table#photodetailtable a {
}
div#content img#photodetail {
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
	border: medium ridge #CCCCCC;
	float: left;
}
div#content img.photodetailthumb {
	margin-top: 1px;
	margin-right: 0px;
	margin-bottom: 2px;
	margin-left: 0px;
	border: medium ridge #CCCCCC;
}

The test page.
http://www.famousfriends.co.uk/test.html

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]

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

Anyone any thoughts?

[rmedek]

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]

Originally Posted by rmedek

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]

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

[canadianjameson]

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

[canadianjameson]

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]

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]

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]

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.

That is the bit that has me curious. The fix works. But why?

MattyUK