Validating CSS: filter in Firefox

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.

Related Posts

• Why You Should Validate Your Website
• Devil’s Advocate – Why You SHOULD’NT Validate Your Website
• The Only Firefox Add-On You’ll Ever Need