Question

I have a table that I need to render some vertical text in one of the columns.

My understanding is that the following style should achieve the effect across browsers:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);   
-ms-transform: rotate(-90deg);   
-o-transform: rotate(-90deg);   
transform: rotate(-90deg);

This is OK in IE9 and Firefox, however this does not seem to work in IE7 or IE8… See:

http://jsfiddle.net/wzUfj/

Can anybody suggest a way to achieve this?

Thanks

Answer 1

In order to Rotate in those older browsers, you’ll have to use Microsoft’s proprietary filters:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALUE);

Replace Value with an integer, 0-4.

0 = 0 degrees
1 = 90 degrees
2 = 180 degrees
3 = 270 degrees
4 = 360 degrees

I do not believe you can do anything other than 90 degree increments, and I believe you may only have one filter per CSS rule. Also, this is of course non-standard and won’t validate, if that’s an issue.