IE8 problem with transparent rounded corners

[marcus_christie]

I’ve run into an issue with integrating the tweet button with my website. The corners of the tweet button and the count box (I’m using the horizontal layout) are showing up with black corners as if the transparency on those images isn’t working. Here’s a screenshot: http://dl.dropbox.com/u/7630260/tweet_button_corners_ie8.png

The first tweet button is an iframe tweet button and the second is the JavaScript version, but both exhibit this issue.

I found a helpful StackOverflow question: http://stackoverflow.com/questions/1251416/png-transparency-problems-in-ie8. Based on that, I used IE Developer Tools to manipulate the style definition for .tb, which defines the background image of the button. I added

background-color: white;

And with this I was able to get the transparency to work and the button appeared normal. However, because of cross domain issues, I can’t really manipulate the CSS inside this iframe (at least I don’t think I can).

Would it be possible for the Twitter team to add “background-color:white;” to the .tb style class, or otherwise address this issue? Or, perhaps I’m doing something wrong and if so, any help is appreciated.

[adardesign]

Ok, here is the reason why.

IE8 and below are buggy with PNG’s when there is opacity.

Do you by any chance fading in that component?

[marcus_christie]

Yes that did it! I was using jQuery.fadeTo to fade out and in, which as you probably know manipulates the opacity.

I don’t really need to fade out the tweet button. I was just fading out a part of the page that had some data that was reloading in the background, and the tweet button happened to be in that block. So I’ll just change my implementation to not fade out the tweet button.

Thanks for your help,
Marc

[adardesign]

My pleasure!

[niall]