title: table cell content rotation bug in ie8 and ie9
body: <p>I'm trying to create a table that will have in first column cells with rowspan.
  I would like this text to be rotated.</p>
  
  <p>I managed to get this working on chrome, but on IE I get weird result.<br/>
  This is result on Chrome:
  <img src="https://i.stack.imgur.com/SrVYZ.png" alt="enter image description here"></p>
  
  <p>and this is on IE8 (IE10 works fine):
  <img src="https://i.stack.imgur.com/sEvNc.jpg" alt="enter image description here"></p>
  
  <p>and here is IE9 result:
  <img src="https://i.stack.imgur.com/99Lek.png" alt="enter image description here"></p>
  
  <p>I tried with width and height properties, but it didn't help.</p>
  
  <p>Below is my css for those td elements and here is jsFiddle to test it: <a href="http://jsfiddle.net/qYySC/4/" rel="nofollow noreferrer">http://jsfiddle.net/qYySC/4/</a></p>
  
  <pre><code>td.rotate div {
      vertical-align: middle;
      text-align: center;
      font-size: 12px;
      -moz-transform: rotate(270deg);
      -webkit-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }
  </code></pre>
  
  <p>How should I change my css to remove that align issue?
  My table is generated by server so it can have different size (number of rows in groups).</p>
  
  <p>I need to get this working on IE8.</p>
  
  <p><strong>EDIT:</strong><br/>
  When I change text length in those rotated cells it start to look almost right.
  But if I'll have longer text can I wrap it somehow into 2 lines? And there is centering issue - text in those cells isn't centered (IE8).</p>