Absolute CSS boxes
Quite some time ago, I had an argument with a friend who is a big fan of Microsoft products. While I'm no Xbox hater, I am not very fond of some of their more shoddy products such as Internet Explorer. He was justifying the shortcomings of IE6, saying that absolute positioning is rarely used in web pages, and that :hover pseudo class is not really that useful.
For the most part, he was right. Very few websites I have seen actually make extensive use of absolute positioning. By default, if you do not specify a mode, web browsers will use static positioning. This is what I used in nearly all the sites I have done. For most real-world scenarios, extra features are not needed. Still, good browsers adhere to standards as much as possible. There is even the Acid2 Test to determine how well various browsers measure up.
In that same vein of relatively useless, but somewhat amusing CSS implimentation, I have whipped up this little demo. It works in Firefox, Opera and Safari, but fails in the big blue E. Those who are proned to seizures might not want to move the mouse around too quickly. Use at your own risk:
Demo: absolute CSS boxes / screenshot
There you have it folks, an impractically enjoyable use of CSS! By the way, these effects do not use images or JavaScript. It uses only a single file, containing valid XHTML 1.0 Strict and CSS. Feel free to take the code and do what you want with it. Don't forget to check it out in Internet Explorer, and show all of your friends why they need to switch to a different browser. ;-)
Note: For Linux/Mac users without IE6, here's a screenshot: IE6 Example.
