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:

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

I created 2 CSS, one for IE and one for the rest of the browsers. For IE I used:

style="color:black; line-height:20px; writing-mode: tb-rl; filter: flipH() flipV();"

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%; ??