Menu
I have a css rule that works fine in chrome, firefox and used to work in IE. Now my seemingly valid css is not working.
.s-tour {
/*border-radius: 5px;*/
margin: 0 auto;
width: 250px;
height: 200px;
line-height: 100px;
font-weight: 600;
font-size: 18px;
box-shadow: 0 0 7px rgba(1, 1, 1, .8);
border: solid thin #555;
color: #E0E0E0;
background: #555;
background-image: linear-gradient(to bottom, #555 0%, #eee 100%);
background-image:-webkit-linear-gradient(top, #777, #666);
background-image: -ms-linear-gradient(top,#555555 0%,#666666 100%);
background-image:-o-linear-gradient(top, #777, #666);
background-image:-moz-linear-gradient(top, #777, #666);
}
I feel like both background-image: linear-gradient(to bottom, #555 0%, #eee 100%); or -ms-background-image: linear-gradient(top,#555555 0%,#666666 100%); should be working for IE 11 yet the the IE inspector puts a fuzzy red line under it and anything else I try.
I checked a working gradient on a google page and background-image: -ms-linear-gradient(top,#f5f5f5,#f1f1f1); was working fine, yet even that exact line would not work on my site.
I've tried all variations I can think of in terms of property,prefix and values, including every relevant answer on stack overflow and am now stumped, wondering if it is a DOM issue or bug or something simple.
773
try adding this line to the end of your class:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#555555, endColorstr=#666666);
So the problem I really had was that I was not telling IE to render the page using the latest standards of css.
Adding <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> to the <head> block fixed most of my problems.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
