& Lt; Hand & gt; CSS does not apply in IE11

advertisements

So my page is working absolutely fine on FireFox and Google Chrome: http://www.cis130.net/bluehdoj/aboutresponsive

However, the styles I apply to my main tag simply aren't happening in IE11. I tried adding -ms- for the linear gradient but it didn't seem to change anything. If anyone could help me figure this out, I would be very appreciative.

Here's the code:

main {
    margin: 0 auto;
    padding-top: 5em;
    max-width: 1000px;
    background-image: linear-gradient(to right, #6E6E6E 50%, #F90 50%);
    background-image: -ms-linear-gradient(to right, #6E6E6E 50%, #F90 50%);
    min-height: 100%;
    overflow: auto;
    zoom: 1;
}

and the html:

<main>
        <div class="leftCol">
            <h2>Color Scheme Changer</h2>
            <div class="button" id="changeScheme"></div>
            <p>Whatever you do, don't click this button. It's seriously wicked evil. Like the Dirty Bubble, Man-Ray, and Barnacle Boy AKA Every Villian is Lemons evil.</p>
        </div><!--Ends left column-->

        <div class="rightCol">
            <h2>Mirror Mode Button</h2>
            <div class="button" id="mirrorMode"></div>
            <p>This button, however, is pure good. It once saved a bunch of puppies from a burning building. I would highly suggest pressing it.</p>
        </div><!--Ends right column-->
    </main>

P.S. this is just a little assignment I've been working on for my into to web dev class and is fine to submit as is but I am a perfectionist plus I would like to know how to avoid the problem in the future.


It s Not supported in IE SOURCE

try HTML5 shiv

<!--[if IE]>
  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->