Monday, November 20, 2006

Bold Text and Opacity Issue

Quite often I use opacity to control how certain items look. For example, I want inactive items to be appear lighter to reflect the fact that they are inactive or not as important. To do this, I use <div style="filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;">blah blah blah</div>.

One of the things I've experienced is that bolded text does not always display correctly. To get around this, you can set the background-color to white and this will get around the display oddities. So, after changing my code to the following, the opaqued text looks great.

<div style="filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; background-color: white;">blah blah blah</div>

Special thanks to a blog titled The Strange Zen of JavaScript for pointing me at this fix. I would highly recommend taking a look as he has quite a bit of good info on there.

No comments:

Post a Comment