0

I have the following media queries that are specific for all IE's. When I go to IE11 or older, the browser does not that detect my media queries.

<!--[if IE]>
<style>
   @media screen (min-width:1281px){
    .topleft {
        position: absolute;
        top: 0%;
        left: -16% !important;
    }

    .bgimg {
        width: 69%;
        left: 15%;
    }
}

@media screen (max-width: 1280px){
    .middle1 {
        position: absolute;
        top: 44% !important;
        left: 33% !important;
        width: 38% !important;
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }
}
</style><![endif]-->

My second question I have is I am unable to do a linear-gradient correctly in IE.

I was able to find reference on here on how to accomplish it. However, when I do -ms-linear-gradient(...), it does create the gradient but it covers the background image that I have. How can I achieve it without the background image being blacked out?

background-image: url('http://oc2-reatest/OCUpgrade52/images/Stethoscope_ver2.jpg');/*, -ms-linear-gradient(top, #f0f0f0 0%, #f0f0f0 10%);

/*filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f0f0f0', endColorstr='#f0f0f0');/*For IE7-8-9*/ */
Johannes
  • 64,305
  • 18
  • 73
  • 130
Roberto Flores
  • 25
  • 10

1 Answers1

0

Is that in your stylesheet (i.e. separate css file)? (conditional comments only work in HTML files)

If not (i.e. if it is in the HTML file), it's important that it follows after including your general stylesheet, since otherwise it would be overwritten by the general styles.

And a third possible cause: There might be rules with a higher specifity in the general styles which overrule those in your IE media queries. For example, if there is a rule like .container_all .topleft, it will have a higher specifity than your .topleft rule and overrule it. To avoid that, search for the selectors in the general stylesheets and use the same ones in your media queries.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • @ Johannes: Yes, it is after the general stylesheet and you are correct, it is in the HTML File where I am doing the styling right now. and for your response, I did you the same selectors from the general stylesheets. However, it still did not override those changes with the changes I am trying to do – Roberto Flores Feb 22 '18 at 19:02
  • I found this answer concerning IE9 - maybe that helps: https://stackoverflow.com/a/15442638/5641669, and this concerning IE10: https://stackoverflow.com/q/20114855/5641669 – Johannes Feb 22 '18 at 20:14
  • Johannes: Thank you so much . That is actually helped a lot. – Roberto Flores Feb 22 '18 at 21:01