More edumacation needed, please. :) Firefox versus IE display

[OneGrassRoot]

(first, sorry to be a pain and be cryptic with name, but I'm tired of my questions being the Google hits rather than the sites themselves...lol...hopefully this will solve that dilemma.)

Sooooo, if one goes to www(dot)facingfreedomschallenge(dot)blogspot (dot)com in Firefox, the banner image seems fine. In IE, however, the frame around the image has a light blue tint.

I created the image and inserted a border, rather than use the existing border of the blogger template. I made the blogger template border the same as the background color, so it's essentially hidden. I made sure I made the background transparent in Gimp, so the color between the white frame and the image itself is (or should be )the deep blue of the background on the page itself.

Hope that makes sense.

Why oh why does it have a light blue color around the image in IE but not in Firefox? And, how can I eliminate it? The differences between the two browsers and how something displays continues to confound me.

Thanks! :)

[Shardik]

1. I just took a look and didn't see any difference at all.

What version of IE are you using? Some of the earlier versions didn't play with CSS as nicely as Firefox. I was using IE7 and Firefox 3.0.1 to view your site.

[OneGrassRoot]

2. Aha! :)

That's probably it. I never use IE (except to check how a page may display differently); I have 6.0. I should upgrade, eh?

I'm no longer confounded, about that particular issue at least!

Thank you once again, Shardik! You are much appreciated. :)

[charlie]

3. Yeah, it won't work in IE6

because IE6 doesn't support alpha channels in PNG images. In other words, the transparent part of your image is transparent only in IE7 and above. For IE6 and below, the grey part shows.

If you want it to look the same in IE6 and below, you can do one of two things. Replace the PNG with a GIF with a transparent color (easy). Or you can find a javascript switcher that'll detect IE6- and replace the PNG with a GIF on the fly (messy).

[OneGrassRoot]

5. So, about PNG....

In general, that's definitely preferred when there is text in the image, right? That's what I've found, before the different browser issues. LOL.

Okay, I will replace the PNG with a GIF as you recommend. Thank you very much!

Geez, I learn so much from you all. :)

[canetoad]

4. I've just had a look

after dusting off my old IE (v.6 I think) and can definitely see the blue-ish border where there is none in Firefox.

I'm wondering if this is something to do with the cell padding which, IIRC, IE 6 adds to the inside of the cell not the outside (or vice-versa). Maybe the light blue is really the default grey, and if you set any cell padding to white it may vanish.

[OneGrassRoot]

6. Yeah, that's over my head....lolol

If I've dealt with cell padding thus far, I haven't been aware of it! LOL :)

I'll try that GIF approach.

Thanks for helping with this one, as with the last one, canetoad. :)

[Shardik]

7. I'll bet your right.

I spent a few nights last year trying to figure that one out.

[charlie]

8. It's not the markup

The "padding" you guys are seeing is the transparent part of the image. It's not transparent in IE6.

[a la izquierda]

9. On a related note...

why do some emails have teeny tiny print when viewed through Firefox, but not through IE? And it's not all emails, just some of them...