CSS Rotation & IE: абсолютное расположение, кажется, повреждает IE

Я пытаюсь повернуть множество текстовых блоков, таким образом, они вертикально ориентированы и располагают их в очень определенные местоположения на схеме, которая будет предварительно просмотрена и затем распечатана. CSS поворачивает текст очень приятно в IE, FF, даже Opera.

Но когда я пытаюсь расположить повернутый элемент, IE 7 и 8 (не взволнованный приблизительно 6), повреждения полностью и элемент остаются в его исходном местоположении. Какой-либо путь вокруг этого? Мне действительно нужно управление к пикселю того, где эти маркировки расположены.

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