Welcome to WebmasterWorld Guest from 54.226.23.160

Forum Moderators: not2easy

Message Too Old, No Replies

Problems with opacity and IE

Things to know

     
4:19 am on Jun 17, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


Opacity doesn't work in IE, so you use a filter: the alpha filter.

Example:

p.filter { filter: alpha(opacity=40); }

It will only work on elements that have triggered hasLayout.

Problem is, if a user has ClearType font smoothing enabled, and they happen to view an alpha filtered element that has no background colour explicitly set, it will look absolutely horrible -- almost how you can set some text in photoshop to display stroke only, but the font size is too small.

Test it out for yourself.

HTML:

<p>This is a test paragraph</p>
<p class="filter">This is a test paragraph with the alpha opacity filter</p>
<p class="filter_nobackground">This is a test paragraph with the alpha opacity filter, but with no background colour set</p>

CSS:

body {
background-color: #9cf;
font: 12px Verdana, Arial, Helvetica, sans-serif;
}
p {
padding: 10px 15px;
background-color: #444;
color: #fff;
}
p.filter {
opacity: 0.4;
filter: alpha(opacity=40); /* this is because IE doesn't render the opacity property */
zoom: 1.0; /* this triggers hasLayout */
}
p.filter_nobackground {
background-color: transparent; /* this is what happens without a background colour */
opacity: 0.4; /* IE 6 & 7 */
filter: alpha(opacity=40);
zoom: 1.0;
}

It can easily be fixed by explicitly setting a background colour to

#fff
(or whatever colour you want it to be.)

It might be a somewhat specific audience, but I thought it would be helpful when the problem hits someone unexpectedly (like it did me.)

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members