pngHack.css doesn't validate.

[kabanero]

Hello everybody,

I use PNG graphics with transparency on my pages. And I use pngHack.css, pnghack.htc method because of IE. I have DOCTYPE set to XHTML 1.0 Transitional.

pngHack.css has this code:

1. img {
2. behavior: url('pngHack.htc');
3. }

When I try to validate CSS I get this error message from validator:

------------------------------------------------------
W3C CSS Validator Results:

Errors
URI : [mycompany.com...]
Line: 2 Context : img

Property behavior doesn't exist : url('pngHack.htc')
------------------------------------------------------

Any thoughts how to resolve this issue?

Thanks.

[encyclo]

In short, you don't -

behavior

is IE-specific CSS.

As the hack is destined for IE6 only, you don't need to serve it to all browsers, so you can use an IE conditional comment. This won't fix the validation problem, but at least the validator will ignore the file.

[kabanero]

Thanks encyclo. I switched to sleight.js and now everything validates.

[swa66]

You could create a file ie.css and add that file with a conditional statement so only IE knows of the file. (nice way to avoid using javascript).

Something like

index.html:
<link rel="stylesheet" type="text/css" href="/css/std.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->

std.css:
containing standards compliant stuff and

ie.css:
containing all the hacks to get the buggy thing to work somewhat.

Since the reference to the ie.css is now from a standards compliant point of view a mere comment, you have standards compliant code (if it validates etc.)

Depending on the severity of the hacks you put in, you might want to filter as well so that IE7 doesn't load it when it comes out of beta.
But since we all lack a decent crystal ball on what will be in the real IE7 (i.e. wich bugs will be fixed and which bugs will be called "features" and will remain to haunt us forever ...)

IE: "just say no", unfortunately people actually persist in using it ...

I've struggled a lot with bugs in IE, nowadays what I do is not think of the webpage as a page with cols, but as a page where I can float things if I need to and let the text sit inbetween. I seem to trigger much less bugs in IE that way and can do mostly without hacks at all.

I basically code different colors for borders that have 3D (e.g. outset) effects (IE needs about 50% grey or the 3D effect is lost); need to kick it to center things that need to be centered and need to add width to things that have too many floats in them to avoid the guiotine bug (text is randomly not rendered/displayed but you can highlight it, or it'll show up after you scroll or a dozen or so other actions). Setting width on such containers does mean the layout isn't as fluid as it could have been, but ...

The trick with using 2 files also allows to develop the std.css file and forget about any and all bugs IE has. Next you try the layout in IE and fix just the ie.css file leaving the standards one alone ... (and hence all the stuff you need to twist IE's arm don't get seen by the others and it remains working as intended there).