Weird image phenomenon...can anyone help?? I am stumped.

[mariahlullaby]

Something weird is happening with the thumbnails in our site's photgallery.

Okay, so for our website, we have huge photogallery we update regularly. It's done in frames, so to access the photogallery, the link is:

http://www.mariahdaily.com/photogallery/index.shtml

If you go to "2006 > 10/13/06 Arriving at Narita Airport in Japan" in Internet Explorer (on a PC), these weird white specs show up on the thumbnails. The thumbnail itself is fine, the photos they link are fine, just the thumbnails are weird.

This does NOT happen on my Mac on any browser. So below is a screen cap of what I mean:

Now, if you use Internet Explorer and go to the DIRECT LINK for the photos (http://www.mariahdaily.com/photogallery/2006/japan/naritaairport/index.shtml), the thumbnails are FINE. Keep in mind this is the page the frame in the photogallery is showing.

This is happening on multiple computers (not mine, but the other two webmasters' computers).

Any idea what is happening?

 

[thejadedmonkey]

I was going to say your computer is messed up, but I have the same problem, and only in IE6. Firefox works fine for me.. I was thinking perhaps it's how IE6 scales down the image, but they're thumbnails.. and they work fine in IE6 too..

That's just really strange. you should tell your viewers to get a mac (or to use firefox)

P.S. Maybe try resaving the thumbnails with a different quality? *shrug*

 

[mkrishnan]

Oooh, I think I have a guess. Sort of.

From your picture, it looks as if every spec is on her black juicy suit, right? This has to do with the background color setting of those thumbnails. Right now there is a shade of black which appears in the photo in her outfit that is set to transparent. You see it in the page and not the second link because in the page, they are overlaid on that white frame that you make. I think that if you make sure the thumbnails are saved to be opaque, the problem will go away.

 

[mariahlullaby]

The weird thing is, however, is that directly linking to the thumbnail itself shows up fine...no white specks. Same if you go to the direct link to the photogallery.

Thanks for your help though!

 

[mkrishnan]

No, but that's consistent. It's only occurring because of the properties of the background of the frame. How are you generating the pictures? Are you using the save for web option in PS? If so, try changing the option in the Matte box to black.

 

[Makosuke]

I wasn't aware that JPEG could have transparency set, but there is NO question that one precise shade of grey is turning white;

When I open one of the thumbnails in Photoshop and use the wand tool to click on one of the white areas with tolerance set to 1, no anti-aliasing, and non-contiguous, it selects only the pixels that show up white in your screenshot. Not sure how color adjustment will affect this, but the grey appears to be #222222.

Are you running any hacks in your CSS to turn on alpha channel support in IE? Perhaps a filter like this is getting applied to the JPEGs in the thumbnails and is turning that particular shade of grey white?

 

[Makosuke]

A-yup. Here's your problem right here:

<IFRAME name="pics" src="http://www.mariahdaily.com/photogallery/pics.shtml" width="353" height="390" align="right" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="auto" style="FILTER: chroma (color=#222222)" allowtransparency="true"></IFRAME>

See there where you're turning on FILTER: chroma (color=#222222) and allowtransparency="true"?

What that's doing is making the color 222222 on the thumbnails trasnparent, and it's exposing the white background underneath. It doesn't happen when you view the thumbs directly, since you're no longer using those styles, and it only happens on IE because it's the only browser that supports those crazy nonstandard FILTER directives in a stylesheet.

I don't know why you want #222222 to be trasnparent (something to do with adding an alpha channel to PNGs in IE or something?), but you're going to need to change that to make it work.

 

[mariahlullaby]

A-yup. Here's your problem right here:

<IFRAME name="pics" src="http://www.mariahdaily.com/photogallery/pics.shtml" width="353" height="390" align="right" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="auto" style="FILTER: chroma (color=#222222)" allowtransparency="true"></IFRAME>

See there where you're turning on FILTER: chroma (color=#222222) and allowtransparency="true"?

What that's doing is making the color 222222 on the thumbnails trasnparent, and it's exposing the white background underneath. It doesn't happen when you view the thumbs directly, since you're no longer using those styles, and it only happens on IE because it's the only browser that supports those crazy nonstandard FILTER directives in a stylesheet.

I don't know why you want #222222 to be trasnparent (something to do with adding an alpha channel to PNGs in IE or something?), but you're going to need to change that to make it work.

I must say that I LOVE YOU. I want to give you PRESENTS.

This has been KILLING us! Thank you!!! It fixed it.

 

[Makosuke]

I must say that I LOVE YOU. I want to give you PRESENTS.

I appreciate the sentiment. If you happen to know of a way to get IE7 to respect CSS "clear" properties for floating elements outside the current box (I've got another thread on it), lemmie know. Otherwise, sharp-looking site, and I'm glad I could be of help--creepy little problems like that are always the toughest, but also the most fun.

 

[mariahlullaby]

I appreciate the sentiment. If you happen to know of a way to get IE7 to respect CSS "clear" properties for floating elements outside the current box (I've got another thread on it), lemmie know. Otherwise, sharp-looking site, and I'm glad I could be of help--creepy little problems like that are always the toughest, but also the most fun.

Haha, thanks. Good luck though, getting that to work. And thank you so much for your help.