title: Text rotation 270 degrees not works in IE8
body: <p>I am creating a slide menu with one label text rotated by 270 degrees. Works well in all modern browsers including Explorers 10+9. But I'd like to make it functional also in older IE8 &amp; IE7, so added the filter definition recommended in many answers here on SO, but it doesn't work. Tested the page with IE developer tools switched to IE8 browser (in IE8 standards mode).</p>
  
  <p>Here is <a href="http://jsfiddle.net/8mJA7/" rel="nofollow">jsfiddle</a> + <a href="http://jsfiddle.net/8mJA7/show" rel="nofollow">its preview</a>.</p>
  
  <p>CSS</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>.menu p.heading {
      position:absolute;
      right:-22px;
      top:3em;
      -webkit-transform:rotate(-90deg);
      -moz-transform:rotate(-90deg);
      -ms-transform:rotate(-90deg);
      -o-transform:rotate(-90deg);
      transform:rotate(-90deg);
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }
  </code></pre>
  
  <p>Tried to add/remove quotes to the filter, changed html5 doctype to xhtml, but nothing seems to work. Can somebody give me an advice on how to set it right for IE 8 &amp; 7 ?</p>
  
  <p>And then also one subsidiary question: is there any advantage to separate those two IE8-specific definitions in a separated tag <a href="http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/9b21a3c2-6bdf-4aad-a90d-868bdeb3d866#88077185-5d18-46fe-b9f2-5e1c34ba86a2" rel="nofollow">as shown here</a>?</p>
  
  <pre class="lang-css prettyprint-override"><code>&lt;!--[if lte IE 8]&gt;
  &lt;style type="text/css"&gt;
  .rotation {
      -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }
  &lt;/style&gt;
  &lt;![endif]--&gt;
  </code></pre>
  
  <p>Thanks for any hints !</p>