Monday, April 25, 2011

Text rotation in IE7


It was very difficult for me to rotate text in IE7. I googled a lot but couldnt find any easy solution. Here is a piece of html and css which worked for me.

<style>
div.content {
position: relative;
float:left;
width: 45px;
height: 85px;
border: black 1px solid;
}

.txtblock {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.txtblock {
position: absolute;
font-weight:bold;
}
</style>

<div class="content ">
<div id="Div1" class="txtblock">Awkward</div>
</div>


Inside a relative div, make an absolute div and apply the moz webkit transformation on that. The preview is on the right.

5 comments: