It's really no secret to anyone who has done some web design that Internet Explorer does some funky things with rendering. There's probably lots of examples of weird bugs and workarounds out there, but I'm curious about something slightly different. Instead of bugs that people have to hack around, what bugs have you run into that can actually be used for amusing and/or almost functional purposes?
Here's an example of one I figured out my first year of college. It turns out you can also find this one on Google, but I didn't know until after I did it:
<html>
<head>
<style type="text/css">
h1,p {
color: rgb(254.1, 254.1, 254.1);
text-align: center;
}
h2 {
color: white;
}
#ie {
color: rgb(0.1,0.1,0.1);
}
</style>
<title>Some CSS Magic</title>
</head>
<body>
<div>
<h1>It's Magic!<h1>
<h2 id="ie">Just kidding. No magic here. The title needs to be changed.</h2>
</div>
<div>
<p>What's magic, you're wondering? Well, you can't tell right now, but this text "disappears" if you view this page in Internet Explorer<p>
<p>Go ahead, give it a try. I promise it works.</p>
</div>
</body>
</html>
What happens here? Well, Firefox, Opera, and indeed most other browsers will completely ignore the floating point rgb() values. They just don't do anything with them. IE, though, will gladly render them, so this effectively makes one set of text "disappear" (white-on-white background) and makes the <h2> text appear on IE, while the other browsers see the full page. Of course, this isn't immensely useful, but it is a reasonably amusing (and cheap!) way to determine if someone is viewing your page on IE.
So I'm interested in any other weird bugs that people have been able to turn into a good chuckle at IE's expense. Nothing malicious, please, but silly rendering tricks are absolutely welcome!