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.