Utterly lost, IE displaying image wrong

Content
1

I am currently developing a splash page (client wants it despite protests so please don’t try and convince me that they are useless), but images with transparency aren’t displaying correctly no matter what format I use in Internet Explorer.

I’m not even talking about IE6 which I know has issues with png. I’m having trouble in IE8.

Located at http://lab.dovermedia.com.au/earth if you’d like to have a look.

Basically, the image displays a black border (I’ve even saved with a custom pallet of all white and transparency to try fix it). Sorry if this is a simple problem, but I can’t work it out.

I look forward to suggestions/thoughts. Also, the left side should currently look fine as it’s a flash, the picture on the right is the “if there is no flash player” solution.

(PS. Already tried gif, png8 png28, png 32 (I think they are the right numbers))

2

it looks ok to me in IE8 and IE7. Are you sure your not having a caching issue?

3

Thanks for the reply wheeler, no its not a cache issue unfortunately. Its been tried on several computers now (some that hadn’t loaded the site before then) and they all display a grey outline in the image.

Black border is probably the wrong word, it’s grey as it’s set to 20% opacity, and outline because it’s around the floral shape itself, not a box or anything. It’s really annoying as I was hoping to show the client for her approval today or tomorrow but I don’t know how to get rid of it.

4

okay I confess that I suck with code so someone else can correct me if I am way off with this but is it due to this line (see bold below) in your CSS? I’m assuming that they should be the same but I’m just going by your comments not my vast knowledge of CSS. (Sorry I’m unable to test further but it works fine on Firefox & Safari on a mac :))

}
#leftflower {
position:absolute;
left:0px;
top:50%;
height:450px;
margin-top:-225px;
z-index:2;
display:none;
}
#rightflower {
position:absolute;
right:0px;
top:50%;
height:450px;
margin-top:-225px;
z-index:2;
filter: alpha(opacity=20);
display:none;

5

Yea sorry I’m not a code junkie, I’m always surprised how long I’ve survived without knowing more than I do. Hopefully someone will see my post and be so infuriated that they will tell you the right answer!

6

That line is null and void now. Jquery set’s the div opacity to 0 before animating it now anyway. This stops it just becoming 100% in IE. Also it’s not the same as #leftflower as I am working on the flash alternative on the right currently.

I’ll get rid of it anyway (it’s not needed now for said reasons) and see if it changed anything and let you know.

7

I’m not a code junkie either… but starting to need new things so needing to learn new languages.

Didn’t fix it though unfortunately. Here angry angry coder? Come and correct him :slight_smile: