Re: [WSG] CSS opacity filter

[Tee G. Peng]

Hi Christian,
On Feb 17, 2007, at 2:45 AM, Christian Fagan wrote:

Hello list,

My question is regarding the CSS opacity filters:

    opacity:.60;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;



1st project: www.cataloguecentral.com.au (top left dynamic menu)
2nd project: www.fagandesign.com.au/PROJECTS/UmamiByDesign/ 
indexNew3.html (top right menu)

In the first, the opacity attribute displays well across most major  
browsers (IE 5.5+, FF, M, N - not Opera, not sure Safari).
In the second, the exact same declaration displays well in all  
browsers but IE...


I believe filter does work for Opera, and absolutely for Safari. As  
of IE 5.5+, I don't believe it works unless you have declared IE's  
Proprietary Filter, which I don't see in your style sheet, and I  
don't see you have used conditional comments to serve IE.

In the first example, the reason it doesn't work in Opera, which I  
think is because you declared the filter in the first descendent of ul.

ul li a:hover
{
        text-decoration: none;
        opacity:.100;
        filter: alpha(opacity=100);
        -moz-opacity: 1.0;
        background-color: #303030;
        color: #ffffff !important;
}

My guess is Opera needs more specific declaration which is the  
descendent of li, whereas Safari and FF are more lenient.

ul ul li:hover {...}

On a side note, you may want to change your 2nd project's right  
vertical menu from <p> to ul.

<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>

In markup, p is for paragraph, not something else.


tee







*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************