Welcome to WebmasterWorld Guest from 54.166.54.215

Forum Moderators: incrediBILL

IE6 image rendering problem

Aspect ratios: too wide or too tall on first load

   
12:36 am on Oct 17, 2006 (gmt 0)

10+ Year Member



I am a website development novice with an image rendering problem.

With IE6, the images on my site are displaying with incorrect aspect ratios when the pages are first loaded.

Some images are rendering too tall and others too wide. They appear to be rendering square.

When I navigate away from the page and come back to it, the images are rendered correctly - except for the largest page - which seems to require a couple more tries before all of the pictures are rendering correctly.

None of the images in question are in divs of restricted sizes. They are also being loaded at their actual sizes (except for a couple that are a couple of px different - not enough to make a difference).

I had the same problem in the page header and also had some of the header background div showing below the pictures. I found this message:

[webmasterworld.com...]

and when I fixed the margin problem by using display: block; for the header images, they rendered correctly also.

Do I have to use display: block; on ALL the images in order for them to render with the correct aspect ratios first try? Or is there some other fix.

Thanks in advance for all replies

jean

1:30 am on Oct 17, 2006 (gmt 0)

10+ Year Member



"and when I fixed the margin problem by using display: block; for the header images, they rendered correctly also."

no such luck. Although they are correct on my DD's IE6.0.2900, my header background image is still hanging below the pictures on browershots.org

I have just learned that I cannot post links to the site in question so I will post some sample code instead. Apologies for violating the forum rules by posting a link.

regards
jean

[edited by: CDNQuilter at 1:34 am (utc) on Oct. 17, 2006]

8:18 pm on Oct 17, 2006 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Jean,
when you say the images are being loaded at their actual sizes, have you got those explicit sizes specified somewhere in the HTML or CSS?

e.g.
<img src="my.gif" width="100" height="100" alt="">
or
<img src="my.gif" style="width: 100px; height: 100px;" alt="">

(Note: units are important in CSS)

9:24 pm on Oct 17, 2006 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Do I have to use display: block; on ALL the images in order for them to render with the correct aspect ratios first try?

No, you should not have to set

display:block;
in order to get your images displaying at the correct aspect ratio, but I think you've realised that already. That, I think, is an unrelated issue.

However, it is a very good idea to set the image dimensions explicitly, if you are not doing already, as Suzy suggests.

9:50 pm on Oct 17, 2006 (gmt 0)

10+ Year Member



Image width and height can be an issue with a bad or Wrong DTD.
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month