CODEWITHSUNDEEP
jquerycssinternet-explorer-8
BrynJ
BrynJ

Reputation: 8382

IE8 hover / rendering bug for rotated elements

I'm using a jQuery plugin to produce a horizontal accordion with rotated text labels. It's called easyAccordion and the demo page is here:

http://www.madeincima.it/download/samples/jquery/easyAccordion/

My problem, which is apparent even on their demo page is that IE8 seems to treat rotated elements (the plugin uses CSS Microsoft rotation filter) as if the hoverable / clickable zone is not rotated. What this means is that only the top of the buttons are clickable, to the size of the element's width. Strangely, this works correctly in IE7 but not with IE8.

Is there some way (CSS or other) that I can workaround this issue and allow the whole element to be clickable?

Upvotes: 2

Views: 207

Answers (1)

swider
swider

Reputation: 3444

Rotating with CSS filter actually only transforms the painted result of the DOM node, not the actual node itself. This means any interactivity with the DOM node will not cover the same coordinates as what you see on the screen.

I once created a variable length navbar that sat on a 45 degree angle, but needed to use actual text rather than images. For IE, I ended up layering a transparent image map over the whole thing that delegated mouse events back to the original nodes.

Upvotes: 1

Related Questions