Forums

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

Home Forums CSS button :after not working in IE

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #166677
    Willem-Siebe
    Participant

    Hi,

    I made a nice arrow button with :after, but in IE it’s not working, anybody has an idea why this is?

    The green arrow button can be found here: http://107.6.179.98/~wsintern/art-styling.nl/schilderijen-kopen/breakable-world/.

    The only solution I found on the internet was to use ‘overflow: visible’, but then it’s still not looking how it should look.

    Kind regards,

    Willem

    #166687
    Paulie_D
    Member

    Rather than send us off of to a link, could you make a reduced case in Codepen.io?

    See the “Tips” box on the right of this page.

    Also, which version of IE?

    #167381
    Willem-Siebe
    Participant

    Hi Paulie,

    Thanx for the tip. I made a codepen which you can find her: http://codepen.io/willemsiebe/pen/jgvpt/.

    In IE the :after don’t work.

    Kind regards,

    Willem

    #167384
    Paulie_D
    Member

    Hmm…the button element is supported in Exploder 11 but I’m wondering if the :after isn’t for the <button>.

    When I change the button to a div, it works.

    One other thing

    I’d change this

    .single_add_to_cart_button:after {
    right: -44px;
    }
    

    to this

    .single_add_to_cart_button:after {
    left:100%; /* no magic numbers */
    }
    
    #167385
    Willem-Siebe
    Participant

    Hi, thanks for the CSS improvement, I’m going to implement that :-). Yes, maybe it’s the button element, but I don’t think I will be able to change that HTML, so if IE does not support that I don’t think there is an other way to make it an arrow.

    #168765
    Willem-Siebe
    Participant

    Ok, I changed my CSS to the one you suggested. I also tried to find if :after is not supported.
    I found this: https://css-tricks.com/browser-support-pseudo-elements/, where it seems IE support :after. I also read this: https://css-tricks.com/use-button-element/ where they say you can use :after with button. But it seems not te be the case for IE…

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