CSS Rotation for Internet Explorer

Internet Explorer 10

Internet Explorer 10

I personally tend not to care about testing my website with old version of IE (meaning anything below 9). I haven’t really liked IE for it’s lack of support for current web standards, and I don’t think it’s that good of a browser at all. The new “Metro” IE is quite nice for the new Windows 8 operating system, but it still isn’t my browser of choice which is Chrome.

Unfortunately, it appears that when working on a website for a company, in my case Seed Software’s new website, support for old versions of IE is needed. I have been working on the website for some time to get everything fully working and perfect, but when I tested the site on our test server as a fully releasable/published website I was having problems with IE 7 & 8. This was due to CSS rotation that I had added. The thing is, when I was testing in a releasable state on my local IIS, it worked absolutely fine and everything looked perfect on version of IE 7 upwards as well as the other major web browsers.

I tried looking into the problem over the weekend and many browses of Stack Overflow to see if anyone else had the same problem but unfortunately no one had.

Here are the lines for rotation that I was using for IE:

-ms-transform: rotate(270deg); // IE9

-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); // IE8

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

These however do work, and have been tested on my local machine in release. My initial thought was due to the websites CSS being minified on publish through Visual Studio. But both were minified so they should still work the same.

Using the very (not) informative F12 tools in Internet Explorer I tried looking for the problem with rotation and on finding it, I realised that the DIV was being rotated but not it’s content on the test server. Thankfully, Seed’s manager and another team member thought that the problem may be to do with security in the browser. We checked the security settings for IE and switched the Internet security setting to “Medium”. After a refresh, everything looked perfect again!

The only problem with this is that it requires everyone who wants to view the site in IE to have these settings, so I am going to look into an easier solution which may mean more JavaScript… (woo…)

3 Responses to “CSS Rotation for Internet Explorer”

By Naveen - 2 September 2014 Reply

Nice Post but do you have any solution for 3d transform for ie 9

By Song - 3 February 2014 Reply

Thank you so much for this article. I was fighting this problem for whole week and it turns out to be the IE11 security setting. I changed it to medium and unchecked the protected mode and it works.

By Kalina - 23 September 2013 Reply

Did you ever find a solution for this? I am having this same problem.

Comment on this post: