I’m at the same time proud and a little ashamed of this hack.
Regardless, I’ll share my method: using a combination of the following conditionals I was able to create two versions of this page that displayed differently depending on which browser the user viewed the page with.
<!--[if !IE]><![IGNORE[--><![IGNORE[]]>
/* HTML instructions for non-IE here */
<!--<![endif]-->
<!--[if IE]>
/* HTML instructions for IE here */
<![endif]-->
Basically, I gave the image a class of .tiltedImage
and styled it in the CSS, placed it where I wanted it and told IE to ignore it. Then, in a more IE-friendly spot on the page, I called the image again, this time without giving it the .tiltedImage
class and specifying the image to render only if the browser was IE. Final page looks like this (non-IE browser display on left, IE on right):

Not the most graceful form of degradation, I’m sure. But it got the job done.
Update
- Aaron Gustafson points out this example is more progressive enhancement than graceful degradation
Leave a Reply