title: Vertical text in IE within a table cell
body: <p>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:</p>
  
  <p><a href="https://stackoverflow.com/questions/272799/vertical-rotated-text-in-html-table">Vertical (rotated) text in HTML table</a></p>
  
  <p>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.</p>
  
  <p>Here are the relevant styles:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>&lt;td class="label" rowspan="3"&gt;&lt;span&gt;Recent&lt;/span&gt;&lt;/td&gt; 
  </code></pre>
  
  <p>You will be my hero if you can get me past this one :)</p>