Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

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.