Display text vertically (rotated 90 degrees) in IE and Firefox

Question

I have a page that houses an asp GridView and I would like to display the text vertically to allow it to print better. Currently I'm using css to do that: .rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width: 25px; }

Which works in FF except the 25px width is ignored and in IE the width is being set correctly but the text isn't vertical. Anyone know how to make this work in both browsers?

Answer 1

Here's a -90 degree rotation using CSS that should work in IE:

.box_rotate {
    -moz-transform: rotate(-90deg);  /* FF3.5+ */
    -o-transform: rotate(-90deg);  /* Opera 10.5 */
    -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
             M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 
                M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */
    zoom: 1;
}

For your reference http://css3please.com/ is a good tool for generating these kind of CSS effect with pretty good cross browser support.

I can't really say why the width isn't applying in FF without a concrete example, but you might try setting display:block;