I have been facing this problem forever. I am trying to implement some transparency in IE which doesn't understand opacity directly. I have to use filters and I use the following css rule: * html div.className { filter: alpha(opacity=50); } This doesn't validate correctly! It says: * html div.className Parse Error opacity=50) The same validation error occurs for all filters such as filter: chroma(color=pink) or filter: shadow(color=#00cc66, direction=45), etc. What is going on? Are we not supposed to use filters at all? How would things look properly in IE then? Do you know any workaround for this?
If you care about supporting IE - and sometimes when it comes to Gecko based browsers, even if you restrict yourself to CSS 2.1 and HTML4.... CSS Validation is a pipedream. There is NO excuse for invalid HTML - there is NOTHING you need to do in your markup that would ever be invalid. CSS on the other hand, well - there's a lot of properties that make life simpler (certainly simpler than bloating out the markup with that IE conditional comment crap) that just aren't going to validate. Zoom for haslayout when you can't use width or height, zoom for zoomfix on LI for IE7 (which is NOT the same as haslayout!), filter for when you want opacity, -moz-opacity when you want opacity to work in gecko 1.8/earlier (which is still a concern for many *nix users), expression for implementing min/max-width, -moz-inline-box/-moz-inline-block for when even the newest gecko's inline-block STILL doesn't work right, behavior for fixing IE6's lack of hover states, etc etc... Vendor specific CSS does not validate; It's kind of a suck it up and deal scenario. I'm not saying don't validate your CSS, but if there's an error, know WHY it's an error and document it with a comment if need be. 100% valid CSS 2.1 is not always practical if you are going to support IE. You see zoom:1, opacity or expression listed as an error, document why it's an error and why you are using it. But again, no excuse for the markup - but the stylesheet, well - say thank you to M$ and Mozilla.
One of the hundreds of reasons IE has always been the worst browser on the planet. Of course not! filters never have been and never will be part of the standard! You should not have to, no, but IE is the worst browser on the planet. IE is the worst browser on the planet. IE is the worst browser on the planet.
You need to make a separate stylesheet for IE6 if you want your site to validate while also using opacity in ie. Include it like this: <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> This way you wont trip up the validator. However, realize that ie6.css will still technically be invalid, but there is no reason to have to validate that stylesheet as it is made specifically for a broken browser
Well, the functionality for opacity is there, you may as well use it to your advantage. I like my websites to look nice and as consistent as possible. I'm not going to leave out transparency on one of the browsers just because I don't feel like adding a few more lines.
Wasn't referring to the transparancy, I was referring to the use of conditional comments... You end up sending more markup to all users for something you can just say in the CSS anyways. More CSS is most always preferred over more markup because CSS can be cached across pages... much less who needs the overhead of yet another separate file? I won't use conditional comments in the markup for a CSS shortcoming - IMHO that's just stupid, wasteful, and for what? So a error you can EXPLAIN doesn't show up? It's not like we're talking about an error in the markup; the specification SAYS unknown properties are skipped/harmless. If you can explain WHY it's an error, don't waste your time putting it in a separate file and bloating the markup. GENERALLY I find conditional comments are used in layouts where the markup is rubbish, and the CSS is worse... You know, sites with a fixed width layout for no good reason, fixed metric fonts for an accessibility /FAIL/, DIV thrown around unordered lists for god only knows what reason, nonsensical heading orders assuming headings are used at all, absolute url's, classes on tags that shouldn't need classes, etc, etc, etc? You know, where 'screen' isn't nested with "projection, tv" and no attempt is made at any sort of graceful degradation?