Microsoft Internet Explorer is a constant thorn in my side as a web developer. Although it's come along way in terms of being standards compliant, IE is still woefully lagging behind other browsers, even two and three year-old versions of, say, Mozilla Firefox.
The css "opacity" option is a common sticking point for me. It's part of CSS3, which technically hasn't been released yet. All browsers except IE implement it just fine. The idea is that you can set the transparency of an object by giving it a decimal number from 0 to 1, where 0 is completely transparent and 1 is completely opaque. The vertical and horizontal bars used in the design of this site demonstrate this effect. If they were opaque, the intersection of colors would not create the kind of style I tried to achieve.
Internet Explorer does not do opacity. Whereas all other browsers will accept
for example, Microsoft wants us to use the horribly inelegant
where the value varies from 0 to 100 instead of 0 to 1.
When creating this site, I discovered something interesting. Microsoft's filter has never validated at W3School's CSS validation tool. I've known that for awhile. But, what I didn't know was, neither does opacity! CSS3, being technically unreleased, though in progress for many years already, will not validate, since the current validation engine assumes CSS2.
jQuery came to my rescue of course. I decided that, if I couldn't put opacity in my stylesheet, I'd put it in my Javascript. Can't affect standards compliance there, and I still get my effect, right? Well, lo and behold, opening this site in Internet Explorer will reveal that telling jQuery to change "opacity" also achieves the correct implementation in Internet Explorer!
$("#horiz-stripe, #vert-stripe").css({ opacity: 0.4 });
$("#titletext-dropshadow").css({ opacity: 0.85 });
$("#horiz-stripe2").css({ opacity: 0.2 });
I'm continually amazed at jQuery. It's truly a remarkable piece of technology and it's no wonder that so many different professional websites have picked it up, which you can see on the jQuery homepage.