CODEWITHSUNDEEP
cssrotationinternet-explorer-9
Rick Donohoe
Rick Donohoe

Reputation: 7281

CSS3 rotation causing problems IE9

I am using the following in IE9:

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

It works in the way it rotates the text, but oddly it gives the element a black background for no reason?!

The CSS:

.view-see-the-difference-in-your-sector .views-field-title span {
   display: block;
   -moz-transform: rotate(-90deg); 
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -ms-transform:rotate(-90deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  zoom: 1;
  -moz-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
   width: 200px;
}

Also notice I have an origin for all browser rotations apart from the filter one. What is the correct syntax to use here?

Upvotes: 3

Views: 5841

Answers (2)

Kartikay Tripathi
Kartikay Tripathi

Reputation: 1253

We were using : transform: rotate(45deg); not working in Chrome and IE9.

First Try : Tried solution given in CSS rotate property in IE, it was not working in IE9.

       i.e:

        -moz-transform: rotate(45deg);  /* FF3.5/3.6 */
        -o-transform: rotate(45deg);  /* Opera 10.5 */
        -webkit-transform: rotate(45deg);  /* Saf3.1+ */
        transform: rotate(45deg);

Solution : Final solution i.e:

        -moz-transform: rotate(45deg);  /* FF3.5/3.6 */
        -o-transform: rotate(45deg);  /* Opera 10.5 */
        -webkit-transform: rotate(45deg);  /* Saf3.1+ */
         transform: rotate(45deg);  
         -ms-transform: rotate(45deg); 
          ms-transform: rotate(45deg);  /* This Line did the trick for IE9

Found the solution from following URL : http://bugs.jquery.com/ticket/8346

Upvotes: 6

Kaloyan Stamatov
Kaloyan Stamatov

Reputation: 4024

I find this hack that fix the problem for me. You should add filter:none; style to the container with black background. Somehow ie9 does not support filter style used for ie8 so you have to disable it. In your case:

.ie9 .view-see-the-difference-in-your-sector .views-field-title span  {
   filter:none;
}

You have to detect if your browser is ie9 and add this class to some parent node like the body tag.

Upvotes: 7

Related Questions