CSS Rotation & IE: absolute positioning seems to break IE

Question

I'm trying to rotate a variety of text blocks so they are vertically oriented, and position them in very specific locations on a diagram which will be previewed and then printed. CSS rotates the text very nicely in IE, FF, even Opera.

But when I try to position a rotated element, IE 7 & 8 (not worried about 6) breaks completely and the element stays in its original location. Any way around this? I really need to-the-pixel control of where these labels are located.

HTML

  <div class="content rotate">
    <div id="Div1" class="txtblock">Ardvark Avacado<br />Awkward</div>
    <div id="Div2" class="txtblock">Brownies<br />Bacteria Brussel Sprouts</div>
  </div>

CSS

div.content {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 30px;
    border-top: black 4px solid; 
    border-right: blue 4px solid; 
    border-bottom: black 4px dashed; 
    border-left: blue 4px dashed; }

.rotate  {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

.txtblock {
    width: auto;
    position: absolute;
    }

#Div1 {
    left:44px; 
    top:70px; 
    border:red 3px solid; }

#Div2 {
    left:13px; 
    top:170px; 
    border:purple 3px solid;  }

Answer 1

This sounds like an issue I spent a good deal of time with. I left two comments on Paul Irish's blog post detailing my findings. Here is what I wrote:

IE6 and 7: You must declare at least height or width on the div that's going to be be rotated BEFORE your rotation filters appear in the CSS. Even if you do this, however, any styles applied to that div AFTER the rotation filters appear in the code will not be applied. The same seems to be true for any styles applied to that div's children as well. Weird.

IE8: This seems to not be a problem. I successfully applied styles to the div (including declaring its height or width for the first time) after the rotation filters appear in the code.

...and more CSS rotation weirdness to report:

In IE6 and 7, even if you follow the rules I posted a few comments back, you will still totally break your site if you use more than one rotation filter per external CSS file. You either have to have separate CSS files per rotation filter, or simply add each filter nested in its own unique style tags in the head of your html. Failure to do so will only display the first rotated object, but even this will be blurry and at the incorrect angle.

Hilariously, removing the DOCTYPE causes all the rotation to render perfectly, so I'm assuming quirks mode knows how to handle multiple rotation filters? Also, with a larger, more complex stylesheet, there were even weirder side effects, but I couldn't pinpoint what was causing those. Anyways…

Take home message:

Use only 1 proprietary ms filter: (when used for rotation, at least) per external stylesheet. and.. Each rotation filter in your html must be in its own set of style tags.

Even though my issue was slightly different, you may be running into a similar situation with the two inner divs being rotated by the parent. It's worth a shot. At least try moving the .rotate delclaration to the bottom of the stylesheet.