Hi Guys,
I'm using a little code I found online to toggle opacity on pictures, to give it a highlight effect on rollover, now it works and everything looks pretty but the problem is, it isn't validating with the W3C, does anyone know if a more efficient way to work this code?

.toggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.toggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.toggleopacity img{
border: 2px solid #fff;
}

.toggleborder:hover img{
border: 2px solid navy;
}

.toggleborder:hover{
color: red;
}


.nontoggleopacity img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.nontoggleopacity:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

.nontoggleopacity img{
border: 0px solid #fff;
}

.nontoggleborder:hover img{
border: 0px solid navy;
}

.nontoggleborder:hover{
color: red;
}

You can see it live at http://www.mediacubed.co.uk/design

Hope you can help,
thanks guys,
Andy

The -moz-opacity selector is no longer needed. You can use opacity: instead (same syntax on the right hand side). This will also allow it to work in browsers like Safari, Chrome, and Opera.

If you want it to work in IE, it will never validate (you can use {filter: alpha(opacity=50)} however, instead of the long version you have shown).

Even the normal opacity: selector will not validate unless you run it through a CSS3 validation. Not that this matters one bit in reality.

Hi, thank's for your response, I removed the internet explorer filter, to be honest, I'd rather have it not work than not validate, it's operational in Firefox now, but as you mentioned, it only validates in CSS3.

Arghhhh, (screams usual rant about I.E...)
Andy

May I ask what your logic is in the need for a CSS document to validate?

Honestly? I'm just purely pedantic, I know theres no overall purpose in terms of how things operate. Odd, I know lol !