Question : Alpha Opacity issue in IE7/8 - alpha applying to text in UL/LI

Hi Experts,

We've found a new twist on a known issue in the way IE handles the 'filter: alpha' CSS property and hoped someone may have some thoughts on ways to handle it.

After quite a lot of research we have only been able to find the following fix which works fine if the text is contained in div tags;

http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html.

In our case the problem is in a dynamic menu, contained in UL/LI tags, and the fix doesn't seem to work...

Please let me know if there is any other information that may assist...

Cheers,

W1B

Answer : Alpha Opacity issue in IE7/8 - alpha applying to text in UL/LI

Hi While1-Breathe,
The issue results because of the IE ClearType rendering and there are actually many fixes for it apart from the one in the link you provided.

The issue results from specifying a width & opacity filter for the same element, while if the width was specified for a parent element it won't happen.

Also Arial font is the worst case, while if you use Tahoma for example it would look a lot better though it's still not using the fix

Finally applying the background should work even for <li> elements but if you specify the background color to an upper level than the one having the opacity applied to it won't work, for example if you have an <li> with a class where filter is applied, setting the background for the <ul> won't fix it, but the opposite would.

Try the below example, it should show you many cases and check which one would work best for you.

Cheers

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:

           
           
             <div style="font:normal 14px Arial, Helvetica, Serif;">
        <div style="background-color:#fff">
            <ul style="width:100%;filter:alpha(opacity=90);font-weight:bold;">
                <li>This is not working</li>
            </ul>
        </div>
        <div style="width:100%;filter:alpha(opacity=90);font-weight:bold;">
            <ul style="background-color:#fff">
                <li>This is working!</li>
            </ul>
        </div>
        <div>
            <ul style="width:100%;">
                <li style="filter:alpha(opacity=90);font-weight:bold;">This is working too with no fix required since no width is specified for the element but instead it's specified for the UL</li>
                <li style="filter:alpha(opacity=90);font-weight:bold;width:100%">while this doesn't although they're both &lt;li&gt; elements but this one has a width specified</li>
                <li style="filter:alpha(opacity=90);font-weight:bold;font-family:Tahoma;">Tahoma Font Working</li>
                <li style="filter:alpha(opacity=90);font-weight:bold;font-family:Tahoma;width:100%">Tahoma Font not Working which still looks much better than Arial</li>
            </ul>
        </div>
    </div>

           
         