Conditionals

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):

screenshot of final page display

Not the most graceful form of degradation, I’m sure. But it got the job done.

Update



Leave a Reply

Your email address will not be published. Required fields are marked *