Friday, April 29, 2005

IE bold text + opacity problem

You know how IE's alpha opacity filter ruins boldface text?

<div style="width:100%;
     filter:alpha(opacity=90);
     font-weight:bold;">
  Hello world!
</div>

If you're using IE, you can see the problem in action here:

Hello world!

I discovered this while tweaking the opacity filter function I wrote about earlier.

After much fruitless Googling and consulting with webdev experts, I couldn't find a fix. And like most solutions, I had to stumble upon it at the eleventh hour: adding a background color or image to the container element will fix the IE opacity rendering problem.

<div style="width:100%;
     filter:alpha(opacity=90);
     font-weight:bold;
     background-color:#fff">
  Hello world!
</div>

Here it is again, with the fix:

Hello world!

Hopefully the search engines will find this page and no one will have to suffer as I have ever again.

UPDATE: SZOJ reader Andre points out that this bug probably surfaced when MS introduced ClearType rendering, which probably explains why the bug goes away when "font smoothing" is disabled.

70 Comments:

At 4:54 PM, Blogger scottandrew said...

p.s. yes, I am aware that the blog layout is hosed in IE. Dunno when that happened, but I'm working on it. ;)

 
At 2:54 PM, Anonymous EQzE said...

Interesting... a while ago I found a duplicate characters but in IE that could be fixed by applying a background color:

http://www.bingbangboom.us/projects/cssFixes/floatRowIE6/

background: transparent also made the fix work, strangely enough...

 
At 6:25 AM, Anonymous Ken Kolano said...

Seems to me that this could be fixed/applied automatically using CSS JS expressions. Though I don't use them that much so I might be wrong.

Can anyone provide the code for this. Basically, set the item with alpha set's background to be the same as it's parent.

 
At 7:29 AM, Blogger Marty said...

Gee, i'm using IE6 right now and cannot see a difference between the two examples...

 
At 9:19 AM, Blogger Andre said...

You are officially awesome :) This should have been shouted from the rafters by the MSDN the moment this bug surfaced whem ClearType was introduced. (Incidentally, those of you that don't see the difference in IE6 may not have ClearType enabled). You might also be happy to know that the fix also applies to text that is vertically rotated to read from bottom to top. Excellent work figuring this out.

 
At 9:24 AM, Blogger scottandrew said...

Andre: yeah, a few people pointed out that disabling "font smoothing" seemed to fix the problem. However, that's not something we can force from the client side.

 
At 7:42 AM, Blogger Andre said...

Actually, Scott, it is possible to disable ClearType from within the browser (it involves a call to a standard ActiveX object that Microsoft ships, and proper security settings). The problem is that it disables it for the whole OS, not just for the browser, so that method is highly discouraged. If I can find the reference for it I'll send it to you.

 
At 11:00 PM, Blogger uglyblog said...

Hi Blogger, I've been searching around for ugly blog related blogs to get some ideas and possibly trade links with. I found this entry (IE bold text + opacity problem) in my search so I thought I'd post a quick note to let you know. Anyway I have a new blog called Ugly Blog, so feel free to check it out but don't feel obligated. Take care - Eric

 
At 5:10 PM, Blogger Doniette said...

How would you like to know about a Cardinal Fitness resource, that displays all the Cardinal Fitness information on one website? Check out
Cardinal Fitness today. Not only do they have a good fitness book section, but they also have great articles on fitness. I was really impressed with the resources their webmster put together.

 
At 1:27 AM, Blogger jennygirlyx said...

heya

 
At 8:41 AM, Blogger Robin said...

I've spent probably 12 hours on this problem over the last couple of days and finally came across your tip. Thanks very much for sharing!

 
At 7:08 AM, Blogger HiiFii Webservices said...

I wanted to show you some superb resourses on the net.
Learn to earn 90000$/Month
For which you may also see my Personal Website
Here.
and for a Personal Education Career Tools
free Study Database.
This site is for seeing the
Hifi Electronics.
And this is for
World Class Gadgets

 
At 11:05 AM, Blogger HiiFii Webservices said...

Please visit Ayesha Takia's Fan Site and tell us how it is - Ayesha World

 
At 11:12 AM, Blogger HiiFii Webservices said...

Please visit Ayesha Takia's Fan Site and tell us how it is - Ayesha World

 
At 4:09 PM, Blogger Jonathan said...

Nice one - thanks for writing about this.

 
At 5:31 AM, Blogger HiiFii Webservices said...

Hello Friend i wanted your help in winning me the World's Biggest SEO Contest for v7ndotcom
elursrebmem
and also the v7ndotcom elursrebmem
So can you please put my websites link in your website.
Also Please Check out more details at my Get paid to post forums

 
At 2:26 PM, Blogger Princess Sarah said...

THANK YOU!!!

I was using your opacity script and ran into the same problem and nothing would fix it...until i found this post! great!

 
At 1:53 PM, Blogger Dat Chu said...

You saved my hair again. Thank you. I have been having lots of problems with IE until I found your post.

 
At 11:38 AM, Blogger Philip Ashlock said...

Much thanks for sharing this fix. I ran into the problem by using a javascript library (moo.fx), but I'm sure other libraries would run into the same problem too - prototype, script.aculo.us, etc. Someone mentioned that using "background:transparent" would fix the problem, but it didn't work for me, neither did using a transparent gif background image.

 
At 1:52 PM, Blogger Jason said...

A simple solution to an obscure problem. Well done!

 
At 7:51 AM, Blogger civman2 said...

Thank you!

background:transparent didn't work for me, but a solid color did. Wonderful.

 
At 7:40 PM, Blogger Sgt. Pinback said...

Your awesome!

 
At 2:12 PM, Blogger ernest said...

That was a great fix. I found it pretty quickly on google.

 
At 5:21 PM, Blogger Matt said...

Thanks! Potentially millions of my company's users will enjoy the fruits of your labors. :)

 
At 8:58 PM, Blogger Pat said...

Very much appreciated - saved me from a major headache.

 
At 2:48 PM, Blogger Daniil Kulchenko said...

Thank you so much! You saved me many headaches and time with that problem on my blog!

 
At 8:53 PM, Blogger Albi said...

THANK YOU! You saved me.

 
At 2:39 PM, Blogger Jason said...

Two years on, and I've just hit this same problem playing with a jQuery plug-in. I can confirm it affects IE7 in the same way as IE6. Nothing got fixed there, so it may be an OS rendering problem rather than a browser problem.

Thanks for posting the solution - has saved me many hours of effort.

 
At 8:34 PM, Blogger Jacob said...

HI DANIIL KULCHENKO!

I KNOW ABOUT YOU!

YOU GO TO EAS AND ARE IN 7th GRADE!

SO TAKE THAT!

WATCH YOUR BACK! NOT A THREAT JUST A FRIENDLY REMINDER!

 
At 9:19 AM, Blogger Raymond said...

thanks for this. it was driving me insane until i found your post. sheers.

 
At 3:20 AM, Blogger Rackmount LCD Monitor said...

Ayesha takia hot nude sexy bikini wallpapers free

 
At 5:49 PM, Blogger Ivan said...

Great solution. Thanks for saving another XX hours of cursing IE (which I liked a lot until now)

 
At 12:26 PM, Blogger Daniel W said...

Hi, I found this same problem to also happen with transparent png's as the background of an anchor element. Here is a site I am working on at my job. Look at the black scroller triangles in IE 7. I am really lost with this one, but it seems that the bolding problem is happening to the image. More weird than that is that there are no bolding rules for anchors in the body of the document, which is where these scrollers are. I cannot add a background-color to these because they need to be transparent. Do you think this is the same problem?

 
At 6:08 PM, Blogger DREAMER said...

Thanks a lot, I was going crazy with this bug in IE6.
Moreover I found out that IE7 have some similar problems using ClearType. Not really the same but using Scriptaculous fade in(Appear), disables ClearType rendering on text.
I found out a patch to jQuery that is extensible for Scriptaculous adding this line in Effect.Appear.afterFinishInternal:
if(Prototype.Browser.IE)effect.element.style.removeAttribute('filter');

In a note to jason, this error is of course nothing to do with the OS but with the browser, as Firefox and Safari (and maybe Opera) don't manifest this weird behavior in Windows.

 
At 6:00 PM, Blogger satxxkenn said...

Cool blog - Check out my site if you need help finding a good low interest credit card. Credit Cards

 
At 9:05 PM, Blogger fearlex said...

Just three little words: GOD BLESS YOU !!!

You save me from the biggest problem that i ever had.

Thank you and good look always.

 
At 4:41 AM, Blogger Prijesh said...

Why dont you use Mozilla firefox download http://www.mypiju.com

 
At 11:13 AM, Blogger Jeremy said...

THANK YOU! I've spent half of my day putzing around Google trying to find a fix and I finally found this blog post. Our company has been trying to find a fix for t his for a long time now!

Best!

 
At 1:49 PM, Blogger Sean Sullivan said...

Thank you for posting about this. If you hadn't pointed it out (and if Google didn't give your site as much love) I'm afraid I would've spent a lot of time trying to figure this out!

 
At 6:23 AM, Blogger qeremy said...

Thanks a lot..

 
At 1:12 PM, Blogger James said...

I'd love to add another hour to the pile of hours lost to this retarded bug. Thank you so much for the easy fix!!!

 
At 2:44 PM, Blogger blogposter2008 said...

Awesome, thanks so much!! I've been looking for a solution for this awhile now!

 
At 1:58 PM, Blogger Viktro said...

THANK YOU!!!

I have working whit this for like 5 hovers and writing different scripts. I's irritate me that is was sow simply! XP
But thanks any way;)

 
At 1:40 PM, Blogger duru said...

Thanks for the little solution and yes, it is easy to find in searches. I referenced it and gave a backlink in http://drupal.org/node/344046.

 
At 1:31 PM, Blogger charl said...

Thanks a lot for this - I'm using Dojo and I ran into this problem with dojo.fadeIn and generally using dojo.animateProperty to fade text in IE7. This was the fix i needed.

 
At 1:58 PM, Blogger Timothy said...

Thank you very much for this solution, I was tearing my hair out for a week trying to fix this.

 
At 3:06 AM, Blogger hakim said...

Thanks a lot, This IE's problem was really a great pain...Now i have answer to that...

 
At 3:07 AM, Blogger Dennis said...

Thanks a lot - it was very useful. And for those who get here through google:

You might need this if you have a scriptaculous fade in or fade out effect. It will get ugly if you don't have a background color set in IE.

 
At 12:13 PM, Blogger Andy said...

FUCK DUDE, you are damn awesome!
Thanks a LOT!

BTW, this doesn´t happen when the font-color is set to WHITE . Dunno Why =/

 
At 7:06 AM, Blogger chrispower0 said...

Thank you, I too spent time but
never found the answer

 
At 1:18 PM, Blogger Dmitry said...

That's awsome! Dude you're a great guy!
But too bad there is no way to fix it if you need background:transparent;
:((((

 
At 1:41 PM, Blogger Dmitry said...

Dude! I googled the solution for transparent bg!
its over here and its working!
http://www.hedgerwow.com/360/bugs/fix-ie-opacity-text.html

if the link gets cut out or broken contact me dipish {at} mail . ru

 
At 6:53 AM, Blogger Ashley Powell said...

Thank! My problem was with an all black image and your fix worked.

 
At 3:21 AM, Blogger Ciprian said...

Thanks man.. :D Life saver

 
At 2:55 AM, Blogger sparky said...

The background isn't the only criteria to fix the opacity. On your test DIV, you set its width to 100% (which usually is useless since a DIV is a block level element), remove it and it just won't work anymore.

Sure it won't look ugly but it won't be opaque either… You might not see the difference with an opacity of 90% but try with 50%.

The solution is a width + background

 
At 12:34 AM, Blogger kligara said...

you must add digg or stumbleUpon link, a twitter link would've been nice.....

I spent hours to find this post... Thanks though

 
At 4:17 PM, Blogger Jim Thoburn said...

Scott, you rock! I had almost given up on finding a solution to this when I found your post on Google.

 
At 7:19 AM, Blogger milax said...

Perfect, thanks!

 
At 11:44 AM, Blogger Dank Underlord of the Nuggs said...

You are the most brilliant person in the interweb.

 
At 11:45 AM, Blogger Dank Underlord of the Nuggs said...

Brilliant!

 
At 2:49 AM, Blogger Mark Czubin said...

Awsome! I had the same issue with IE7 adding a somewhat border around my text when I made the entire element translucent.

 
At 12:40 AM, Blogger graphicz said...

Thank You!

 
At 4:59 PM, Blogger Pam Griffith said...

I just ran into this myself, thanks for solving it for me :)

 
At 11:28 AM, Blogger Mohammed AbdelRahman said...

What when it needs to have a transparent bg.

I'm sick of that browser!

 
At 4:53 AM, Blogger urban bohemian said...

THANK YOU! I was racking my brain trying to figure this out. Very helpful.

 
At 10:27 AM, Blogger ESquared said...

Thank you greatly for this info... was very unsightly.

 
At 12:22 AM, Blogger dinesh said...

thanks dude thanks a lot
i was stuck in this problem for a long time

 
At 12:23 AM, Blogger dinesh said...

thanks a lot to resolve out this problem

 
At 7:10 AM, Blogger Gauts said...

Thanks! Just saved my life ;)

 
At 2:57 AM, Blogger vishnu ram kumar said...

This has solved the issue. Thanks a lot.

 

Post a Comment

<< Home