vertical text in ie within a table cell

Question

I'm trying to rotate some text cross browser within a thin table cell that spans a few rows. I want it to be a nice compact summary of the rows, which is why it is thin and rotated -90 degrees. The tips described here:

http://stackoverflow.com/questions/272799/vertical-rotated-text-in-html-table

work like a charm except in, surprise surprise, IE, where the text is rotated, but the text is clipped to the width of the cell.

Here's what it looks like in IE8:

And in the well behaved browsers:

here are the relevant styles:

#schedmenu td.label {
/*width:22px;*/
/*width:100%*/
vertical-align:middle;
font-size:12.5px;
}


#schedmenu td.label span {
display:block;
-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;

color:white;
position:relative;
top:12px;
}

and the html:

<td class="label" rowspan="3"><span>Recent</span></td> 

You will be my hero if you can get me past this one :)

Answer 1

Have you tried applying a width or height to the span?

Answer 2

If I were you, I would have open InkScape and created three different image.

or as you already have printscreened images, just crop it. and put them as background image.

I frequently do some extremely beautiful css design which works in chrome and firefox and then print screen it , crop it and replace the actual design with images and it all works in IE.

or span: dispaly:block and height:100%; ??

Answer 3

Not the most elegant way, but it works under IE8 (didn't tried under older versions):

<td class="label" rowspan="3"><span>Recent<br/>&nbsp;</span></td>