CODEWITHSUNDEEP
cssinternet-explorer-8rotationinternet-explorer-7
Stano
Stano

Reputation: 8939

Text rotation 270 degrees not works in IE8

I am creating a slide menu with one label text rotated by 270 degrees. Works well in all modern browsers including Explorers 10+9. But I'd like to make it functional also in older IE8 & IE7, so added the filter definition recommended in many answers here on SO, but it doesn't work. Tested the page with IE developer tools switched to IE8 browser (in IE8 standards mode).

Here is jsfiddle + its preview.

CSS

.menu p.heading {
    position:absolute;
    right:-22px;
    top:3em;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform:rotate(-90deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Tried to add/remove quotes to the filter, changed html5 doctype to xhtml, but nothing seems to work. Can somebody give me an advice on how to set it right for IE 8 & 7 ?

And then also one subsidiary question: is there any advantage to separate those two IE8-specific definitions in a separated tag as shown here?

<!--[if lte IE 8]>
<style type="text/css">
.rotation {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<![endif]-->

Thanks for any hints !

Upvotes: 0

Views: 2995

Answers (1)

Spudley
Spudley

Reputation: 168685

Your rotation seems to be working in IE8. However the rotated item is positioned incorrectly, so the rotated text is off the edge of the screen when you first view the page. It does show up when you hover and the box moves into view.

This is because IE8's filter style has a different rotation point from the standard CSS. It uses the top-left corner as the rotation point, whereas CSS defaults to the center. You'll need to modify one or other of them so that they use the same point. Then once you've positioned it correctly, it'll look the same in all browsers.

This isn't actually that easy to do -- in IE, you'll need to use a completely different rotation filter with complex matrix maths rather than the relatively easy rotation=3 that you have now -- so my recommendation would be to use a javascript polyfill called CSSSandpaper to make IE8 and earlier recognise the standard CSS rotation - it'll use the filter internally, but all you need is -sand-rotate(-90deg); alongside the other standard CSS variants.

This will make your code much easier to work with, and it'll work consistently across browsers.

To answer your second question -- yes, if you're using filter to do rotations, then it would be a good idea to put the filter styles in an IE<=8 specific block, because they interfere with IE9.

IE9 supports the standard CSS rotation, but also works with the filter, so in IE9 as things stand, you're getting both rotations, which is making it go completely wrong. (you end up with graphical corruption; it's not pretty).

However, if you're using CSS Sandpaper as I suggested above, then this point is irrelevant because it will detect which IE version you're on, and won't run in IE9, so in that case you won't need IE8-specific stylesheets.

Upvotes: 2

Related Questions