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;  }