Advanced CSS not working in any version of IE - css

Question

JSFiddle, as requested: http://jsfiddle.net/Es8PK/
So I'm making a website with a single universal stylesheet. This sheet has around 40 different commands (if that's the right word) that work exactly as intended in every version of browser, include IE 8 and up. However, I have two special features on my site, being custom buttons at the top of every page, and a special navigation bar on one page. Both of these feature just refuse to work in any version of IE, even though I've checked with caniuse.com and every command in there is supported by IE 11 (which isn't working). Here is the part of the stylesheet that isn't working, and then the html that uses those parts:
CSS:
/* BUTTONS IN HEADER */
.button {
/* text */
text-decoration: none;
font: 16px/1em 'Droid Sans', sans-serif;
font-weight: bold;
text-shadow: rgba(255,255,255,.5) 0 1px 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
/* layout */
padding: .5em .6em .4em .6em;
margin: .5em;
display: inline-block;
position: relative;
-webkit-border-radius: 8px;
border-radius: 8px;
/* effects */
border-top: 1px solid rgba(255,255,255,0.8);
border-bottom: 1px solid rgba(0,0,0,0.1);
background-image: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: -ms-radial-gradient(farthest-corner ellipse at top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
background-image: radial-gradient(farthest-corner ellipse at top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(http://iwantaneff.in/t/http://iwantaneff.in/t/noise.png);
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
/* color */
color: hsl(0, 0%, 40%) !important;
background-color: hsl(0, 0%, 75%);
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(0, 0%, 60%) 0 .1em 3px, hsl(0, 0%, 45%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.round, .round:after {
border-top: none;
-webkit-border-radius: 1em;
border-radius: 1em;
}
.button.blue {
color: hsl(208, 50%, 40%) !important;
background-color: hsl(208, 100%, 75%);
-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */ rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
}
.button.blue:hover { background-color: hsl(208, 100%, 83%); }
.button:focus {
outline: none;
color: rgba(254,255,255,0.9) !important;
text-shadow: rgba(0,0,0,0.2) 0 1px 2px;
}
.button.disabled, .button.disabled:hover {
opacity: .5;
cursor: default;
color: rgba(0,0,0,0.2) !important;
text-shadow: none !important;
background-color: rgba(0,0,0,0.05);
background-image: none;
border-top: none;
-webkit-box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
box-shadow: inset rgba(255,254,255,0.4) 0 0.3em .3em, inset rgba(0,0,0,0.1) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.3) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
-webkit-transform: translateY(3px);
-ms-transform: translateY(3px);
transform: translateY(3px);
}
.button:active {
background-image: -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(http://iwantaneff.in/t/noise.png);
background-image: -moz-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(http://iwantaneff.in/t/noise.png);
background-image: gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0) )), url(http://iwantaneff.in/t/noise.png);
-webkit-box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
box-shadow: inset rgba(255,255,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.2) 0 -0.1em .3em, /* inner shadow */ rgba(0,0,0,0.4) 0 .1em 1px, /* border */ rgba(0,0,0,0.2) 0 .2em 6px; /* drop shadow */
-webkit-transform: translateY(.2em);
-ms-transform: translateY(.2em);
transform: translateY(.2em);
}
/* NAVIGATION BAR */
nav {
text-align: center;
margin: 20px 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef;
background-image: linear-gradient(to top, #FFFFFF 0%, #3366FF 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #3366FF 100%);
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #3366FF 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 7px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li#LastOne {
position: relative;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(to top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 15px 30px;
color: #0000FF;
text-decoration: none;
font-weight: bold;
text-shadow: 2px 2px 12px #000;
}
nav ul ul {
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
text-align: left;
}
nav ul ul#BestOne {
position: absolute;
right: 0;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
white-space: nowrap;
}
nav ul ul li a {
padding: 15px 15.5px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
HTML (buttons):
<div id="contain2">
<br /><hr>
<a role="button" class="button round disabled">Home</a>
Software
Support
Consulting Services
What's New
Our Clients
About Us
Contact Us
</div>
HTML (navigation bar):
<nav>
<ul>
<li>Seminars and Training
<ul>
<li>New User Training</li>
<li>Making the Most of TCE</li>
<li>Cash Management Workshop</li>
<li>System Manager Training</li>
<li>Service Management Workshop</li>
<li>Advanced System Manager Training</li>
</ul></li>
<li>Peer Work Groups
<ul>
<li>Operational Audit Groups</li>
<li>Sales Manager Work Group</li>
<li>Management Work Study Group</li>
<li>System Manager Work Group</li>
</ul></li>
<li>On-Line User Groups
<ul>
<li>Prospector Pro User Groups</li>
<li>System Manager User Groups</li>
<li>Service & Parts User Group</li>
<li>Owner/CEO User Group</li>
</ul></li>
<li>Coaching Services
<ul>
<li>Financial Analysis and Review</li>
<li>Adjusting Your Inventory</li>
<li>Finding Retail Lending Sources</li>
<li>Obtaining Wholesale Inventory Financing</li>
<li>Building a Buy-Here / Pay-Here Portfolio</li>
</ul></li>
<li id="LastOne">Webinars
<ul id="BestOne">
<li>Obtaining Whole Sale Inventory Financing</li>
<li>Managing Service to Generate Cash</li>
<li>Generating Sales in a Down Market</li>
<li>Stealing Market Share through better CRM</li>
</ul></li>
</ul>
</nav>
I realize this is a lot of code, but I want to make sure anyone willing to try and help me has everything they could possibly need to deduce an answer. In addition, I use Komodo Edit to write my code, and in there it is showing me possible errors in the CSS for background-image in all cases of webkit and ms, and about half the cases of moz and just regular, so that would be a good place to start. Note, all of this works in all other browsers, but not any version of IE that I have (8, 9, 11).
What it looks like in Chrome:
What it looks like in IE:

Answer 1

What about using different css for the older versions of IE?
You can do this by putting this kind of tags in your html document in the head section:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
This code uses another css file for the browsers that are IE version 9 of lower.