1

I'm working on an example of a jQuery notification bar that you can see here: jQuery notification bar example

But for whatever reason the CSS I'm using to define transparency in IE 7 and 8 is not working. If you look at the example in IE 7/8, you will see that the transparency for the .png close button and the transparency for the "reopen" element does not work.

I've successfully defined an element's transparency in IE using this code before, but I can't figure out why it's not working in this example.

I thought I might have hit on something when I read this post, but after trying out the solutions mentioned with the hasLayout property I still didn't have any luck.

Any help would be greatly appreciated. Let me know if you need any additional details.

Thanks!

Community
  • 1
  • 1
Evster
  • 2,552
  • 2
  • 16
  • 14

3 Answers3

2

Wow somebody else just asked a question about this. In older versions of IE, you can't compose transparency from a PNG alpha channel with transparency from a CSS effect. As soon as you apply the style, it quits trying to do transparency from the image.

Yes, it's profoundly lame.

Community
  • 1
  • 1
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • If I understand correctly, this applies to the .png image and why it's not working. But what about the "reopen" box that appears after you click the "close" button? That _should_ be semi-transparent using the CSS values I have in place for it, but I can't figure out what's wrong. That part is not using any .png images. – Evster Jun 23 '11 at 23:57
1
opacity: 0.50;
filter:alpha(opacity=50);

This fixes opacity for IE. Using 50% transparency as example value here.

As for the hellobar_close, give it a background-color and it should work. IE has poor support for transparency in .png images.

riku
  • 763
  • 4
  • 7
  • It doesn't work if the element to which the style is applied is a PNG with partially-transparent pixels. – Pointy Jun 23 '11 at 23:50
  • The background-color fix works for the .png, but then when you click the close button you get an ugly red halo around the image. Based on what Pointy was saying maybe I just need to make a dual-state sprite? – Evster Jun 23 '11 at 23:55
  • @Pointy The filter:alpha fix was meant for the open button which isn't an image. Unless you mean the background-color bit, because that should work. – riku Jun 23 '11 at 23:59
  • Yes it should (and does, to my knowledge) work; I didn't mean to imply otherwise. It's just that poor IE can only handler one source of "alpha" information at a time. – Pointy Jun 24 '11 at 00:04
  • @Pointy ah yeah, that's what you meant. – riku Jun 24 '11 at 01:58
  • @Evster I'm not really sure what's your best approach to fixing the close button situation for IE. You could trying making the png itself transparent and removing the opacity setting altogether from CSS and see if that helps. I didn't realize that you can't use the background at first, sorry about that. – riku Jun 24 '11 at 02:01
1

OK I believe that with the help of the answers provided above and some additional research on my own I have answered my question.

There are actually 2 parts to this problem:

1.) Transparency issues with the .png close button in IE - This part was answered by Pointy above. According to Pointy "The browser is incapable of managing the compositing of the transparent PNG concurrently with any opacity effect on the image. In other words, for any given pixel, you either get alpha channel effects from the PNG itself, or from an opacity filter, but not both." (Quote taken from his answer at IE7 and "jaggies" around layered PNGs (with jQuery))

What I want to happen is for the .png close button to be semi-transparent in it's normal state, and full opacity in its hover state, but apparently this is not possible to achieve in IE using only one single image and CSS transparency. So to get around this I'm just going to have to make a dual-state .png image to get a nice hover effect, rather than relying on CSS transparency to handle that component.

2.) Transparency issue with the "reopen" button - This button should be semi-transparent but did not work in IE. After doing some extensive research on my own I came across this post: jquery IE Fadein and Fadeout Opacity. woodstylee's answer in that post solved my problem.

Due to some weird IE bug that I don't completely understand, I need to declare the element's opacity using jQuery/javascript before any transition/fade effects are applied.

Obviously there is some kind of conflict with jQuery fades/transitions and CSS opacity in IE. If anyone else has some additional info on this subject please post!

When I updated my code with the following, I was able to successfully get my "reopen" button to appear semi-transparent in IE.

$('#hello_mini').css('filter', 'alpha(opacity=75)');

Note that the above line of code needs to be placed before this line:

$('#hello_mini').show('slow');

Also of note... this IE bug appears to only apply to the jQuery show() and hide() functions. When I switch the animation to slideUp() or slideDown() the transparency works fine without any additional javascript.

So bottom line... there is something weird going in with CSS transparency in IE when applied to elements animated through jQuery show() and hide()

If I find out anything else in my research I will post it here.

Here is a link to my updated example, which works in IE 7/8 now.

Community
  • 1
  • 1
Evster
  • 2,552
  • 2
  • 16
  • 14
  • If this is still the best answer, you could accept it. Don't forget to upvote answers which were useful. ;) – KatieK Jun 28 '11 at 19:07