Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] CSS3 Button with Text Rotate (IE 11 Issue)

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #157685
    vnvillar
    Participant

    Hello Guys!

    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.

    https://googledrive.com/host/0By6OIU_4MeTUSUQydUVfRS16M3c/index.html

    Here’s the CodePen link:

    http://codepen.io/anon/pen/yGLBD

    Hope you can help me. :)

    Best,

    Val

    #157687
    Paulie_D
    Member

    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’.

    #157689
    vnvillar
    Participant

    Hello Paulie_D,

    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 a tag and then rotate it? Do you have a better suggestion?

    Thank you so much for your input! I really appreciate it. :)

    Best, Val

    #157693
    Ed
    Participant

    I’m stabbing in the dark here, but in your CodePen you never provide a unprefixed transform rule for the button.

    IE11 follows to the W3C specification for this property, so “can’t see” the -ms-transform rule (which is only used whilst browser implementation of the spec is unfinished). If you add transform: rotate(-90deg); just before .c2c_btn .c2c closes, it might work.

    You should do that all the time anyway. For this exact reason.

    #157694
    vnvillar
    Participant

    Hi Ed!

    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. :)

    #157741
    vnvillar
    Participant

    Hey guys!

    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.

    http://codepen.io/anon/pen/lJKoG

    #160362
    everyday1ebook
    Participant

    You can try it. It supports from IE9+, Opera 11+ and Firefox 3.5+. Using the transform property.

    Learning CSS – Rotation text in CSS (support on IE9+, Firefox, Opera11+)

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.