CODEWITHSUNDEEP
htmlcssinternet-explorer-11
Chris Atwood
Chris Atwood

Reputation: 75

Same classes applied to anchor tag IE 11 generates two different background images

I am applying the same classes to two different elements and the what is generated for the background property is different.

I am ending up with Button 1 - rgba(0, 0, 0, 0) linear-gradient(rgb(0, 81, 0) 0%, rgb(36, 138, 30) 100%) repeat scroll 0% 0% / auto padding-box border-box

Button 2 - rgba(0, 0, 0, 0) linear-gradient(rgb(36, 138, 30) 0%, rgb(0, 81, 0) 100%) repeat scroll 0% 0% / auto padding-box border-box

I do not understand why I would get two different values generated using the same class.

This is what the background property for the class looks like: background: linear-gradient(to bottom, #248a1e 0%,#005100 100%);

So I am ending up with one button that renders the way that I would expect and the other button looks like the one on this post Crossbrowser css gradient in IE10, IE11.

Upvotes: 1

Views: 63

Answers (2)

Chris Atwood
Chris Atwood

Reputation: 75

I tried eliminating things to track this down. The whole time this seemed very odd. I ended up taking the form elements out of the left gutter as I was eliminating things and the effect went away. I put all of the form elements back in and took out only the textarea and that was what was causing the problem. I put the textarea back in and took the class out and it was the class that was applied to the textarea that caused the problem. I ended up narrowing it down to the font-size property of the class that was causing the glitch. I ended up putting everything back in and changed my zoom level and the problem went away. It ended up that there was only one zoom level that was causing the glitch in the button display. There is definitely some browser display bug going on, so I will checkin my changes and move on.

Upvotes: 0

Prabhakaran
Prabhakaran

Reputation: 1544

You are using two classes for same button. The last css will get rendered. So The style from "contact-button" get overridden the style of the class "green-button". Use !important for not overridden properties like this.

    .green-button {
                text-align: center;
                color: #fff;
                border: 1px solid #016d01;
                font-size: 14px;
                font-weight: bold;
                padding: 8px 14px 8px 14px;
                background: #52b152;
                background: linear-gradient(to bottom, #248a1e 0%,#005100 100%) !important;
                border-radius: 4px;
            }

Upvotes: 1

Related Questions