CODEWITHSUNDEEP
cssinternet-explorertext-decorations
Alex
Alex

Reputation: 81

text-decoration on Internet Explorer

I recently coded a website, but I have some problems on some web browsers such as Internet Explorer or even Microsoft Edge. I've made searches and I couldn't find anything. So here is my piece of the CSS code : 

        .container {
            width: 70%;
            position: relative;
            left: 47.5%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            background: white;
            margin-top: -450px;
        }

        article {
            text-align: justify;
            width: 80%;
            margin-left: 25%;
            color: #666;
            margin-bottom: 140px;
        }

        .grand_titre_section {
            font-size: 50px;
            font-family: honey;

            text-decoration: underline overline dotted orange;
            -webkit-text-decoration: underline overline dotted orange;
            -moz-text-decoration: underline overline dotted orange;
            -o-text-decoration: underline overline dotted orange;
            -ms-text-decoration: underline overline dotted orange;

            position: sticky;
            position: -webkit-sticky;
            position: -moz-sticky;
            position: -o-sticky;
            position: -ms-sticky;

            text-decoration-color: orange;
            text-decoration-style: dotted;
            text-decoration-line: overline underline;

            top: 99px;
            background: white;
            z-index: 10000;
            padding: 20px 0px 10px 0px;
        }

and the Html code : 

<div class="container">
    <article>
        <div class="grand1" id="grand1">
            <p class="grand_titre_section">Big title</p>
            <!-- other elements of the div -->
        </div>
    </article>
</div>

I've already tried to use the vendors prefixes and tried to separate "elements" but it doesn't seem to be working.

And by the way, the position: sticky; doesn't work neither.

Tell me if I have to write more code : my web page is a little bit particular because of the positioning.

Upvotes: 0

Views: 1467

Answers (1)

Siddharth
Siddharth

Reputation: 61

As you can see text-decoration is not supported by neither internet explorer or Edge.

enter image description here

Use this site to check for support of various properties across the browsers : https://caniuse.com/#search=text-decoration

You can use ::after & ::before in CSS to get same effect.They are suppported for almost all browsers

Upvotes: 1

Related Questions