- This topic is empty.
December 3, 2013 at 7:16 am #157685
I need your help. I’m trying to work on a pure CSS3 button with text rotate. Tested the button on all modern browsers and made a few fixes for IE 8 – 10. It is working fine but when I checked it on IE11, it seems to be broken :(
I’ve already spent a lot of days trying to debug and fix the issue but I am giving up, I just can’t fix it. I need your expertise guys.
Here’s the link of the button I’m working on.
Here’s the CodePen link:
Hope you can help me. :)
ValDecember 3, 2013 at 7:54 am #157687Paulie_DMember
I know I’m going to get some grief. but why would you structure it that way?
Why not define the whole button (including text) and then rotate the whole thing?
It doesn’t seem to make much sense (to me) to define a vertical button and then horizontal text which has to be transformed.
As for the specific issue…honestly, I dunno. Perhaps there is a conflict with all those filters and IE specific ‘hacks’.December 3, 2013 at 8:20 am #157689
I thought it would it be better having the markup this way but I think your point totally makes sense. I’ll try to redo the markup and maybe use an
atag and then rotate it? Do you have a better suggestion?
Thank you so much for your input! I really appreciate it. :)
Best, ValDecember 3, 2013 at 8:46 am #157693EdParticipant
I’m stabbing in the dark here, but in your CodePen you never provide a unprefixed
transformrule for the button.
IE11 follows to the W3C specification for this property, so “can’t see” the
-ms-transformrule (which is only used whilst browser implementation of the spec is unfinished). If you add
transform: rotate(-90deg);just before
.c2c_btn .c2ccloses, it might work.
You should do that all the time anyway. For this exact reason.December 3, 2013 at 8:57 am #157694
Thanks for your input! I tried adding ‘transform: rotate(-90deg);’ on the CSS. But it didn’t seem to work. But maybe I’m doing the markup all wrong as Paulie_D pointed out. I’ll try to redo the whole thing and update you guys if I got it working.
Really appreciate your help. :)December 4, 2013 at 3:44 am #157741
I’ve finally made a better one and is now working fine on cross-browsers especially in IE7++
Thank you so much for your inputs! I wouldn’t be able to fix this without your help. :)
Here’s the CodePen if you want to look at it.January 14, 2014 at 12:43 am #160362everyday1ebookParticipant
You can try it. It supports from IE9+, Opera 11+ and Firefox 3.5+. Using the transform property.
- The forum ‘CSS’ is closed to new topics and replies.