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
Tnx.net