Forums

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

Home Forums CSS [Solved] content outside of button tag not work on IE

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #153781
    hoangnm
    Participant

    i tried to make a button with small triangle outsite, look like this:

    http://cdpn.io/Dgpfu

    it work fine on FF, Chrome, but on IE it didn’t work, triangle dont display. i’m using IE10 on win8, i changed Browser Mode to IE9, IE8, IE7 it’s still not work

    <button>
      <i></i>
      Send
    </button>
    
    button{
      background: red;
      border:none;
      padding: 10px 20px;
      color:#FFFFFF;
      position: relative;
    }
    button i{
      position: absolute;
      top: 10px;
      right: -20px; 
      width:0;
      height: 0;
      border: solid 10px;
    
    border-color: transparent transparent transparent red;
    }
    

    Help me, pls. Thanks

    #153799
    Paulie_D
    Member

    That’s not the usual way to make a triangle…it’s usually done by using a pseudo-element like :before or :after

    Obviously it works in non-IE…I wasn’t sure why it doesn’t in IE.

    On a hunch, I tried setting the overflow to visible and it seemed to do the trick.

    http://codepen.io/Paulie-D/pen/bglrF

    #153917
    hoangnm
    Participant

    thank you so much, overflow: visible it worked fine.
    :before and:after work with IE8+, but i need support IE7.
    Thank you again!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.