CSS Rotation for Internet Explorer
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!