Question

I’m trying to create a sideways tab set against the side of the browser window – something like this:

The relevant css code so far:

left: -29px;
transform: rotate(-270deg);
-ms-transform: rotate(-270deg); /* IE 9 */
-webkit-transform: rotate(-270deg); /* Safari and Chrome */
-o-transform: rotate(-270deg); /* Opera */
-moz-transform: rotate(-270deg); /* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* for earlier versions of IE */

This works perfectly for Firefox, Chrome, and IE9 – for previous versions of IE, though, the tab doesn’t show up. The problem seems to be the left: -29px; code; if I set it to 0 it looks correct in IE8 and earlier, but not in IE9, Firefox, or Chrome.

What’s the best way to handle this?

Answer 1

As an interim hack, you could add an IE version conditional stylesheet that overrides the left property to 0:

<!--[if lt IE 9]>
    <style>

    #myElement {
        left: 0px;
    }

    </style>
<![endif]-->

The problem here is probably that the origin about which the rotation occurs is not the same. I’ll see if I can find anything on specifying the origin for the transform.