Validating CSS: filter in Firefox

Saturday, August 18th, 2007

Categories: Troubleshooting

RSS Comment Feed

Trackback

AddThis Social Bookmark Button

If you’re like me and you’re using the Web Developer toolbar, you like it when your site validates in it.

If you’re looking to do some AJAX/Javascript effects, for example, where a semi-transparent color (I call them blankets) are put over a background while you pop up a member login, you’ll need to use the filter and opacity css attributes. (Note: If you don’t know what I’m talking about in my example, go to Text-Link-Ads.com and click on Member login)

What your code looked like

Example, We currently have our Div container that we want to make transparent, with an opacity of 65%. This is what the CSS code would look like:

#blanket {
background-color:#111;
filter:alpha(opacity=65);
opacity: 0.65;
}

This returns and error in the Firefox toolbar and doesn’t validate as proper CSS. In your Web Developer toolbar, you got:

Unknown property ‘filter’. Declaration dropped

What’s the solution? Internet Explorer has a built-in function where you can script code that only Internet Explorer browsers can see, and this does not affect any other browsers.

First off, go ahead and comment out the filter attribute in your CSS file:

#blanket {
background-color:#111;
/*filter:alpha(opacity=65);*/
opacity: 0.65;
}

In your HTML file, type the following:

<!–[if IE]>
<style type=”text/css”>
#blanket {filter:alpha(opacity=65);}
</style>
<![endif]–>

When using this syntax, the contents of the comment will only be displayed if the visitor is using Internet Explorer, thus, you can have a site that validates in the Web Developer toolbar, and still works for Internet Explorer users. I will discuss more details around the syntax at a later date.

Good luck.

Bookmark this blog using any bookmark manager!
Subscribe to Pat-Burt.com via RSS


Related Posts


Subscribe to this Post

7 Responses to “Validating CSS: filter in Firefox”

  1. swapnet Says:

    but isn’t there any solution to this in mozilla firefox?

  2. Patrick Burt Says:

    Firefox is okay with using just opacity: 0.65, it’s the filter attribute that Firefox’s built-in validator doesn’t like.

  3. Dmitry Says:

    great thanks! simple and clear!

  4. Willie Says:

    this may be a solution that I see with FF. I have a routine which works in both IE and FF BUT it is FF that displays or indicates an error namely, filter. below is my routine

    How can I eliminate this error in FF, as I am not sure since I am using the onmouseover/out events.

    I would deeply appreciate any help you may offer.

    thanks

  5. chris Says:

    great idea
    thats it
    i´m looking a long time for this fucking two lines

    great work and brain :-)

    greetz

  6. pDude Says:

    this is ok, but! what about if you ahve many filer for different stuff on the page, then you end up with a bunch of filter coded for IE….. yes the developer toolbar tell you there is an error but this doesn’t affect your site…. f__k it!

  7. sashi Says:

    can I get the list of filters that can be used in firefox ..