IE image display problems..

views:

413

answers:

+2 Q:

IE image display problems..

hey folks,

i'm working on a site at the moment: companhiadopijama.com.br/new and i'm having the weirdest issues with IE (7 & 8).. 6 i don't care so much about atm.

my PNG's are displaying with a partial black background on hover (in my menu) & my JPG's in the jquery roundabout are first showing up, then changing to white to black gradient.. i first had them as PNG's but had the same problem.

the code on the site is a bit messy, sorry still learning, but all the relative jquery is in init.js & css is in companhiadopijama.com.br/new/css/main.css

has anyone seen this before? any suggestions?

thanks in advance

+1 A:

I encountered a similar problem with transparency in my png images. Firefox and Safari could easily handle the transparent parts, but in IE these parts were just black. Assure that there are no transparent parts in your images.

bertolami 2009-12-31 13:01:39

actually i'm gonna add a if IE script to replace all tranparent pngs as jpgs .. just in case.. but its the images in the roundabout below the menu that is causing me the biggest headache.. does it display the same for you? or is it rendering ok?

Bren 2009-12-31 13:07:31

Sorry but I don't remember exactly. Just that there was a transparency problem with IE. And (luckily) I don't have an IE6 anymore.

bertolami 2010-01-01 12:42:53

unluckily a lot of my clients customers still use that dog of a browser.. so i've replaced all the transparent pngs with jpgs but still have the gradient issue on the homepage roundabout.. ahhhhh!!

Bren 2010-01-04 12:51:54

+2 A:

It's because you (via jQuery) are using the alpha-opacity filter for your fading effects. IE simply doesn't support transparent-PNG-plus-opacity: the alpha filter's opacity level overrides the per-pixel opacity levels, causing background pixels to lose their transparency.

With the AlphaImageLoader fix as for IE6 and the background set to white you can get a somewhat different effect, which is generally less offensive to the eye although still wrong (the less opaque of the pixel transparency and the alpha filter wins; they should of course properly be multiplied). An alternative would be to forego the fade in/out effects on IE.

bobince 2009-12-31 13:26:45

well what i've done now is replace all the pngs with jpgs, so the navbar is displaying fine now.. but the roundabout, with jpgs, is still showing up then rendering as white boxes with a gradient..

Bren 2009-12-31 13:42:37

it was a problem with IE handling em sizes.. i had to resize the image to 1.6% of the em size. all works now..

Bren 2010-01-05 11:45:34

i had to resize the image to 1.6% of the em size...

um, Bren, could you elaborate, I have the same problem but not sure what you mean by the explanation...thanks!

luke 2010-03-01 13:03:10

hey luke,what i did was take the size in em that works in firefox, for me it was 40em i think, and get 1.6% of its value, in this case 0.64em.but, and this may help you more, i've upgraded to jquery 1.4 now and the problems have gone away.

Bren 2010-03-02 23:52:27

ansaurus

tags:

views:

answers:

IE image display problems..

related questions