CODEWITHSUNDEEP
css
Charlie
Charlie

Reputation: 1338

CSS Rotate IE7 and 8

I am going to ask yet another question!

So, CSS Rotate works in ie9 but getting a rotate to work in a previous version is going to be the death of me!

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

This line of code rotates elements by 90 degrees, but around the same origin as the other browsers. If the element is too close to the side of the page, it might be rotated to the outside. Microsoft's IE docs do not make it clear how to set transform origins.

My full code is:

#quick {
    position:fixed;
    top:250px;
    left:-158px;
}
#qmenu-wrapper {
    background-image: url(../images/img_08.png);
    background-repeat:repeat-x;
    height: 35px;
    width:350px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

Is there something we can do to make IE 7 and 8 handle rotations in the same way as 9?

Thanks.

Me!

Upvotes: 1

Views: 15921

Answers (2)

SpliFF
SpliFF

Reputation: 39004

Have a look at the title on the left of this site. I solved the rotation point issue by placing the item in a smaller element with overflow:visible and rotating that element. In other words I made my own pivot point.

In that example I also use writing-mode to rotate the text in IE since using filters disables font smoothing.

<style type="text/css">
/* This wrapper is required to rotate the text around the left edge */

#page_title {
overflow: visible;
position: absolute;
width: 38px;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;
}

#page_title h1 {
display: block;
font-size: 70px;
font-weight: normal;
line-height: 38px;
color: #F3C1E0;
font-variant: small-caps;
width: auto;
}
</style>

<div id="page_title">
<h1>Inwardpath&nbsp;Publishers</h1>
</div>

Upvotes: 4

Mohsen
Mohsen

Reputation: 65815

IE5.5, IE6, IE7 and IE8 are supporting filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); IE5 don't support it!

Source

To change rotation origin using DX Filters just use Matrix filter to change the position of your element. You can have multiple filters on one element. You need to do a little math. Good luck with that!

Upvotes: 4

Related Questions