Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts

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

    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:
    Code:
    <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.
    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
    Last edited by MattyUK; 05-16-2005 at 07:56 PM. Reason: typo

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    I am wondering if to take a step back to tables to resolve this issue.

    Anyone any thoughts?

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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...

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Quote 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.

  • #5
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Well it still has me stumped? Any one else any ideas?

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I can't seem to find it... so i'll just cheer you on
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Last edited by canadianjameson; 05-19-2005 at 07:53 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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*
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •