Text Decoration Strikethrough not working on IE version of Website

The Chrome version of this website shows the strikethrough of the regular price of all products perfectly. However, the explorer version consistently shows the strikethrough below the price. Please advise. Thanks!

  • Dimitris

    Hello there Eugene

    This is happening because the <del> tag inherits the line-through via the browsers themselves, so it's not that a CSS rule is working in Chrome but not in IE.

    We can surpass that, by enqueueing a IE-specific stylesheet and use a different workaround for it, with a bottom-border and an absolute positioning. :wink:
    In the functions.php file of your child-theme, add the following snippet:

    /**
     * Enqueue Scripts
     *
     * Some stylesheets for our example, with conditional loading for IE.
     */
    function example_wp_enqueue_scripts() {
      // A stylesheet targeted at IE
      wp_enqueue_style( 'ie-style', get_stylesheet_directory_uri() . '/ie.css' );
    
      // This will load the <code>ie-style</code> script for IE, but will not load for modern browsers.
      // Reference: https://developer.wordpress.org/reference/functions/wp_style_add_data/
      wp_style_add_data( 'ie-style', 'conditional', 'IE' );
    }
    add_filter( 'wp_enqueue_scripts', 'example_wp_enqueue_scripts' );

    Then create a IE-specific CSS file like wp-content/themes/your-child-theme/ie.css and in there add:

    .price span.woocommerce-Price-amount.amount {
      position: relative;
      display: inline-block;
    }
    .price > del span.woocommerce-Price-amount.amount:before {
      content: '';
      border-bottom: 2px solid black;
      width: 100%;
      position: absolute;
      right: 0;
      top: 50%;
    }

    Let us know how that goes!

    Thank you,
    Dimitris

  • Majid

    Hey Eugene

    It seems like the issue is related to the font used for the prices, overwriting it on IE and using Arial gave me this

    So using the same the method provided above; create this file if it's not already there
    wp-content/themes/your-child-theme/ie.css

    And then past this code in there

    .price span.woocommerce-Price-amount.amount {
    	font-family: "open sans";
    	font-size: 15px;
    }

    If the above didn't work, try this out

    .price span.woocommerce-Price-amount.amount {
    	font-family: "open sans" !important;
    	font-size: 15px;
    }

    Let me know how that went :slight_smile:

    Thanks,
    Majid

  • Majid

    Hi Eugene

    Sorry there was typo in the functions.php file code. the last line is supposed to be
    add_action( 'wp_enqueue_scripts', 'example_wp_enqueue_scripts' );
    instead of
    add_filter( 'wp_enqueue_scripts', 'example_wp_enqueue_scripts' );

    Please make sure you edit the file and save it, because the issue with adding the codes in Customizer, is that they will be always applied, however using the codes we provided they will be only active on Internet Explorer.

    Let me know if you still having issues applying it, I'll be happy to help :slight_smile:

    Thanks,
    Majid

  • Dimitris

    Hello there Eugene

    If you wish to use this workaround for all browsers, you can simply add the following snippet in Appearance -> Customize -> Additional CSS:

    .price > del {
      text-decoration: none;
    }
    .price > del span.woocommerce-Price-amount.amount {
      font-family: "open sans" !important;
      font-size: 15px;
      position: relative;
      display: inline-block;
    }
    .price > del span.woocommerce-Price-amount.amount:before {
      content: '';
      border-bottom: 2px solid black;
      width: 100%;
      position: absolute;
      right: 0;
      top: 50%;
    }

    As for IE, could you please try to add the following snippet (no need to use the MU plugin) in the Additional CSS area again?

    /* Internet Explorer/Edge ? 10 */
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      .price > del span.woocommerce-Price-amount.amount {
        font-family: "open sans" !important;
        font-size: 15px;
        position: relative;
        display: inline-block;
      }
      .price > del span.woocommerce-Price-amount.amount:before {
        content: '';
        border-bottom: 2px solid black;
        width: 100%;
        position: absolute;
        right: 0;
        top: 50%;
      }
    }

    resource: http://browserhacks.com/#ie

    As for Safari, please try the following:

    /* Safari 10.1+ */
    @media not all and (min-resolution:.001dpcm) { @media {
      .price > del span.woocommerce-Price-amount.amount {
        font-family: "open sans" !important;
        font-size: 15px;
        position: relative;
        display: inline-block;
      }
      .price > del span.woocommerce-Price-amount.amount:before {
        content: '';
        border-bottom: 2px solid black;
        width: 100%;
        position: absolute;
        right: 0;
        top: 50%;
      }
    }}

    resource: https://stackoverflow.com/a/25975282/3139513

    Let us know how that goes! :slight_smile:

    Thank you,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.