CSS Rotation for Internet Explorer

By 23rd October 2012 Web Dev 3 Comments
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…)

About James Croft

James is a .NET developer for Black Marble Ltd. with over 5 years app development experience in Microsoft platforms. He enjoys blogging, helping others learn to code, making YouTube videos, spending time with his girlfriend but most of all, penguins.

3 Comments

Leave a Reply

Need help with a project? Get in touch!