How do I resize an element rotated in CSS to fit the new area in IE9?

Question

The Easy Accordion jQuery plugin uses CSS rotation to produce vertical accordion tabs. See: http://www.madeincima.eu/samples/jquery/easyAccordion/

The rotation is accomplished with the following CSS:

/* Safari */ 
-webkit-transform: rotate(-90deg); 

/* Firefox */ 
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px 0px; 

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Works great in the latest FF and Chrome, but is broken in a subtle manner in IE9. Although the rotation is great, the accordion tab is no longer clickable along it's entire height. Instead, only a small width on the top is clickable (as if the element itself was rotated, but the clickable area wasn't).

I have tried to fix this with a Matrix transform that sets sizingMode to "auto expand", but it doesn't work.

I also noticed that SlideDeck (http://slidedeck.com) also suffers from the same issue on IE9.

Is this a bug in IE9, or are we supposed to be using something else to do rotations now?

Answer 1

it doesn't :( i happen to stumble across this post while searching for the EXACT same problem. -ms-transform: rotate(-90deg) butchers the output into something unrecognizable. i think it's the right path however, because there is a random tab floating in the middle of the mess that is entirely clickable AND the gradient doesn't screw up the slide number :) care to try again Remixz? I tried playing with the above line of code but can't seem to get anything to work.

**edit: for reason I don't understand if you change it to: -ms-transform: rotate(0deg); it works! Well, at least the tab is completely clickable...the slide number is still chewed up but that's only for people who are using the slide number AND haven't changed the background image/color to something else