IE Can't Handle Alpha in PNG

I added a "shadow" image, shadow.png, to my website - to get the effect of a raised box, and for some reason, in Firefox, it displays correctly, but in IE, it displays the alpha part in white. I'm not really sure what the problem is.

When I tried to use .gif, GIMP made the entire gradient solid black, not an actual gradient.

Any ideas?

The problem is IE. It can't handle alpha layers in PNG files.

It depends on which version of IE you have. IE5.5 handles it correctly if memory serves.

none of the IE's so far have handled alpha correctly for PNG's.

IE can cope with the alpha channel, but likes to treat it as either fully transparent or fully opaque. Tanslucency is just a no-no.

Only FireFox, NetScape, Opera and other Mozilla based browsers handle such images (mostly) corretly.

There are pages and pages full of PNG image tests, if you Google hard enough.

none of the browsers work 100% with PNG which is a shame. IE7 has proper PNG support apparently, about time too :)

Until IE does, you can't design websites that use full alpha.

What I would suggest is that you do research on what IE shows in the place of the alpha and design a site that looks ok without the alpha and better with it. Or, perhaps, provide a link for IE and a Link for Firefox and such that lets the user pick what browser they are using. (even better, detect it so the idiots that think their browser is Windows XP aren't left out)

Still... the best course of action is wait for IE to play catch up.

Thanks. I wish IE was open-source - someone could fix it, instead of waiting on Microsoft to do so.

So what do you suggest I do?

And also...how would I fix this huge splot of gray in between the logo and the navbar? It only shows up in IE. http://www.noenemies.com

Here's the CSS code: http://www.noenemies.com/main.css

Better design. You don't need PNG. Alternatives are also javascript and flash.

JavaScript and Flash are not alternatives. I believe CSS provides some control over the opacity of elements, but you cannot use it to control the opacity of individual pixels within an element, as you can with PNG.
Creating a flash element to solve the problem is very much a case of cracking a nut with a sledgehammer. In any case, PNG alpha enables some very nice effects:

http://www.mozilla.org/start/1.0/demos/eagle-sun.html

Should I try .gif?

If you want masked. Gif doesn't do alpha channel like png.


What part of "doesn't work with IE" did you not understand dude?

Whens IE7 out?

OK. Well, I just thought of a solution. I'm slow. Instead of making the background transparent, I'll make it the color of the object behind it. :P

Amon - it won't be out until Longhorn. Although I do think a beta came out this summer...I heard about that somewhere...

It's actually possible to make PNG transparency work in IE 5.5 and up, though it's a bit of a hack. You use essentially DirectX to load a PNG and render it on the page. There are a few limitations, and it will never work as smoothly as it does in browsers that properly support PNG's, but it's better than nothing.

Here's a page that describes how it works:
http://homepage.ntlworld.com/bobosola/

IE7 is part of Vista, formerly longhorn.

Microsoft has been giving conflicting info on whether or not a version for XP will be released as well.

Anyway, alpha support for PNG's under IE is a very hot-button issue for many web developers, and you can find a ton of complaints going back for the past 8 years or so, falling on deaf ears with Microsoft even though the W3 specs do call png alpha support for your browser to be compliant if I recall correctly.

Part of the problem is that IE uses a built-in windows GDI rendering enging to draw that kind of stuff, and Ie doesn't have its own image code -- and for whatever reason it's considered a pretty major update.

I guess it's just some in-your-face proof about how *bad* it is when a single closed-source company has an 85% marketshare and doesn't feel the hot breath of any competition behind it anymore -- microsoft gets complacent. They only innovate if they absolutely have to -- after all, the more features they release now, the less they can use to pursuade people to pay money upgrade to the next 'latest and greatest' version later on.

The trick is to find another way to create your design. or change your design to remove the issue whilst retaining your desired overall look & feel.

Just because IE7 will support PNG's properly, it doesn't fic the problem. There are still people using IE3 and there will be many many more people who will continue to use 5.5 and 6 for several years.

You don't have to design for the absolute lowest spec, but there have to be considerations for people running P2 350's with 128MB on Windows 98.

Note that there are some work-arounds that will let you use transparent PNG's in IE 5.5 and above, but they require Javascript to run. For example:

http://homepage.ntlworld.com/bobosola/

(PNG transparancy is such a big deal to have solid support for, because it would allow a full alpha-mask. Transparent GIF's on the other hand only allow a single color to be transparent, meaning no soft edges and the likes)

Really, when you get right down to it. If you want to have an effective website, you aren't going to really need that much in the way of Alpha control. Most websites that shoot for flashy and slick wind up being trouble to control and not user friendly.

Your best course of action is to stick to one of the most common types of layouts for a page, and one of the most common types of naviagtions, and blending 2 that really make your page work, rather than look great.

Keep it 800 by 600, keep it in websafe colors, and keep it simple.

Why? not because you have to, but because thats what 90% of people who are going to use your site will want.

They want the info you are showing at the site, not the interface. True, some sites have both. Great design and Great content. Like Google. But look at google. Simple, clean and transparent as to what to do.

Look at my own site www.dampes8n.com it has lots of problems. But the one thing it does well, is define it's spaces, and it is readily obvious what to do. There are some issues with the nav, mainly, when the buttons open up, you are covering the text with some cursors. (my own doesn't cover the text, which is why I didn't catch it in the design phase)

There aren't a lot of flashy graphics to wow the user, isn't a lot of high level function.

Look at what your site is going to be used for. Is it for a game? look at the many simple game sites out there. Is it some other function. Look at what other sites have done.

You don't really need the alpha to create an effective site. Sure, it will be nice when it is finally implimented, but without pretty looking, or even functional effects in older browsers, you'll be cutting out a lot of people.

It isn't an issue like a lot of other things, where it won't effect the useability of the site if a person doesn't have a browser that can display something. This can potentially be a big problem. Likely, if you need to use alpha, you need to see what you are laying a picture over, and if the older browsers just make it solid and white or whatever, you won't be able to see it.

Just design without it for now.

Don't worry about websafe colours, there are very few people in the world running computer in 256 colours nowadays -0 and if they are, it's unlikely they're on the web.



Wow - you think the navigation on you're website is clear? What happens if people have javascript turned off? They're just going to see letters that mean nothing on their own. The fact that they are just letters, and don't look like links makes things even more confusing, there are no underlines, or button type effects.

I agree with your sentiments but would argue that your site isn't an example of good design.

Feel free to lay into my site(s) if you want - I'm always open to constructive critisism.

Back on subject - pngs. There are ways of getting them to work in IE but I wouldn't bother. As you've found there are generally ways around the problem such as changing the background colour of the image. Unless you are going to have images overlapping content that moves it's really not neccessary.

Usable design doesn't mean boring design. An excellent resource for developers is the css zen garden (http://www.csszengarden.com/). Every page on this site uses the same underlying (accessible usable) code. The only thing changed is the the css (with new images obviously).

Sorry Dampe - even with Javascript On that is bad design.

I've run into at least 5 people with web safe color issues in the last few months. There are far more people out thier who run in 256 color mode than you think.



Other than what I already said was bad about it (and I can agree with the idea that java being turned off will make things -less- clear, but it is still obviously a nav bar and those are the only possible places to click)

Other than that, what do you think is badly designed... its on thing to say that, another to point out the problems... Maybe it is other stuff I've overlooked... Keep in mind, Stylisticly, you might not like my work, we are just talking useable design.

Eat them. =]

EDIT : What Robert said!

Your site relies on "mystery meat navigation" - ie. you have to mouse over links to find out where they go. This is irritating and annoying in oh-so-many ways. If your website was a shop I wouldn't even go beyond the first page. It is no coincidence that Amazon and eBay don't use anything like this.

http://www.webpagesthatsuck.com devotes much time to this particular crime against usability. See http://www.webpagesthatsuck.com/mysterymeatnavigation.html

thanks robert.... I'm working out ways to address that issue.

On one level, I agree entirely.. But this isn't a shop. There is a certain level of discovery involved in mystery meat... and aside from non-java users... You don't have to click things yo find out what they are... which would be worse.

The site is perma-underconstruction. So Expect it to get better as I get moe and more input... it has come a LONG way....

www.geocities.com/dampes8n is what it once was... be thankful hahahaha

That is often the 'idea' behind these designs, that it makes people 'explore' the site and find out what is there. However, it simply doesn't work well in reality, people usually leave.

Your site might not be a shop, but you presumably want people to look around it.

I like the suggestions that you've made...they really are helping me. I'm constantly working on the design.

Robert

In most cases, you are 100% correct. Random people who stuble of the site will likely just leave... But I'm really after random people.

The people that go to my site get specific directions because I sent them there. I tell people to go to my site and click, M for music, or A for art. In this case, being a mystery is a help -right now- because it means that far less people I send the the site get distracted by some heading they like more than the one I sent them too.

But I am fast coming to the time when I will want people who are random to come by.

For now, keeping the random people who stumble on the site from staying long is good. I have limited bandwidth (or did, until go daddy multiplied everything by a factor of 10) And I don't need people bad mouthing me on my forum.

As you may have noticed... my art isn't for everyone... I get lots of people who are in love with Craft... or in love with their God, who take offence at my site of want to bad mouth my skills.

Maybe... once a week I get some @#!*y person on my forum who defaces it and rants on in the guestbook. I delete them when I find them. But imagine if all these unwanted people came and didn't just leave.

Anyway. I am getting closer to an amount of content and a level of quality in content that will require a much more user friendly design.

The reason I used my own site as an example, is because the design's layout is clear.. Nav at the top, not a lot of colors, but bold colors. Pretty easy to read. Simple. And if the headings weren't shrunken up, easy to find your way around.

Also, it doesn't use complex transparency... in fact. It uses little transparency... (Just the bottom of the spikes on the buttons). Thats my main point.. that it doesn't use transparency... it uses a background and a foreground and does just fine... If I didn't use any, I could have had the bottom of those spike AA'd... but, I wanted to make sure the white bar wouldn't cause an issue.