IE6 images missing - possible cause unknown

[Webinsane]

In IE6 some images are missing on the index page and few other pages:


http://www.webinsane.com


<br clear="all" /> could be a problem, but if I remove it footer gets messed up in Firefox.

thanks

[dtm32236]

have you tried doing

<p style="clear:both;">&nbsp;</p>

instead of

<br clear="all">

?

That may help.

[BrandonE]

I assume you are referring to the larger image under "Latest Project". It has something to do with the size of the image and in IE6 it can't place it properly.

Consider wrapping a div around the image or you can even get away with putting align="right" or something like that.

[Webinsane]

Thanks for your input, but that didn't help.

[Centauri]

It works fine with javascript disabled, and I'm thinking it may be the iepngfix.htc that is causing this - it seems to attach a _png_class class name to everything that contains an image or background image, irrespective of whether those images are png's or not....

[Varelse]

A side note - I'd strongly recommend optimizing your images for web use, they reach up to +300kb size!
For dial-up users your site will be image-less for minutes even when you fix the display issue.

And also I would split these images in two - background jpg photos (which can be nicely optimized to 60-90kb) and foreground gif images with the lettering (for clarity - to avoid blurring with jpg's compression).

[Webinsane]

Thanks I will try to see if I can find solution with iepngfix.


I already started to optimize images. Header images can't be gifs since quality of the image is horrible even with highest gif quality. I could lower quality of the jpgs, just a bit :-)

Thank You!

[Varelse]

Header images can't be gifs since quality of the image is horrible even with highest gif quality.

They can - if done properly - and their quality will be better than jpg's. However they should be prepared for the background they will be used on, otherwise they will look bad.

[Webinsane]

I can't see how can you make this file:

http://www.webinsane.com/images/header4.jpg

a gif and still keep the high quality. I did increase the quality of jpg and lowered the image size to 90kb. Any attempt to make this file lower than that size in gif resulted in horrible quality. If you know the solution please help

[logic_earth]

You could reduce the height of the images as you are hardly even using all the space. Also might be a good idea to separate the text from the image and use real text.

[Varelse]

I can't see how can you make this file:

http://www.webinsane.com/images/header4.jpg

a gif and still keep the high quality. I did increase the quality of jpg and lowered the image size to 90kb. Any attempt to make this file lower than that size in gif resulted in horrible quality. If you know the solution please help

I suggested making a gif file for the lettering ONLY. So the background photo is jpg and can be heavily compressed.
If you keep the lettering with jpg file, compression artifacts will make the text poor quality, that's why I suggested gif. Again - for the lettering only.

[Webinsane]

I tried the real text and it just doesn't look as good. Images are now from 50KB to 90KB so it is not so bad. However, I still didn't resolve the IE6 problem.

Thanks for your help. Greatly appreciated.

[O_o.moo]

They can - if done properly - and their quality will be better than jpg's. However they should be prepared for the background they will be used on, otherwise they will look bad.

File sizes people O_o

Why use gif for gradient image? Although that image does have only a few colours which seem flat here and there. I would use png's any, since he's using the iepngfix

It could be this IE6 issue though -

http://www.fivesevensix.com/studies/ie6flicker/

http://archivist.incutio.com/viewlist/css-discuss/30707

[Varelse]

File sizes people O_o

So you say that optimizing the images to keep the file size as low as possible is not worth spending a few seconds?

Why use gif for gradient image? Although that image does have only a few colours which seem flat here and there. I would use png's any, since he's using the iepngfix

For this type of image both PNG and GIF can be used. And I'd stick to 8-bit PNG, not the 32-bit one. Also an 8/8 PNG would be worth giving a try.

[O_o.moo]

So you say that optimizing the images to keep the file size as low as possible is not worth spending a few seconds?

That is what I meant... maybe I just didn't come across that way.

Why png 8??? Is it smaller???

[nepalsites]

i saw this in your homepage.

<img style="outline-color: -moz-use-text-color; outline-style: none; outline-width: medium;" src="images/rent-motenegro.gif" alt="Rent Montenegro" border="0">

i am not sure what that styling is all about. but that is definitely not working in IE. why don't you try just without style to see if it works. such as
<img src="images/rent-motenegro.gif" alt="Rent Montenegro" border="0">

[Varelse]

That is what I meant... maybe I just didn't come across that way.

Interesting... A few minutes' work spent on optimizing the images can save you lots of bandwidth - isn't it worth the effort?
With thousands guests visiting your website it does make a difference.

Why png 8??? Is it smaller???

Yes, it's smaller. Also its (1-bit) transparency does not cause display problems in IE6 and if 8-bit transparency is used for PNG-8, it degrades in IE6 in an acceptable way.

[O_o.moo]

Yes, it's smaller. Also its (1-bit) transparency does not cause display problems in IE6 and if 8-bit transparency is used for PNG-8, it degrades in IE6 in an acceptable way.

8-bit transparency? Is that a setting in Photoshop cause I don't see it in FW. Plus I'm looking for that drop shadow type of transparency

Still heads up for normal "gif type" transparency, because the PNG-8's file size is actually smaller than a GIF.

[Varelse]

On the contrary - it's a built-in Fireworks feature, while with Photoshop you have to install a plugin for exporting 8/8 PNGs.

You can read more about using and preparing the 8-bit PNGs with 8-bit alpha channel (8/8) in this article - Using PNG8 in Fireworks.

[O_o.moo]

Shweet!!!11

Will have a read, thanks