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:
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.
I am creating a button with both border radius and gradient.
If you check in IE browser on the right side a background color is taking.
I am trying to resolve this issue but I am unable to do it.
All the browsers are working fine, only IE is facing this issue
Here is the demo: Link
HTML:
<span aria-disabled="false" id="__button2-0" class="sapUiSegmentedButton" role="radiogroup" tabIndex="0" data-sap-ui="__button2-0">
<button aria-haspopup="true" aria-disabled="false" id="__button3-0" class="sapCPDownloadBtn sapCPCartBtn sapUiBtn sapUiBtnNoGradient sapUiBtnNorm sapUiBtnS sapUiBtnStd sapUiMenuButton" role="button" tabIndex="-1" type="button" data-sap-ui="__button3-0">
<span class="sapUiBtnTxt">Download</span>
<span class="sapUiMenuButtonIco"></span>
</button>
</span>
CSS:
.sapCPCartBtn {
width: 205px;
/* fallback */
padding: 10px;
text-align: center;
height: 32px;
box-shadow: none;
color: #FFFFFF !important;
font-weight: bold;
font-size: 1em !important;
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
border-radius: 10px !important;
-khtml-border-radius: 10px !important;
-goog-ms-border-radius: 10px!important;
margin-top: 5px;
text-align: center;
display: inline-block;
cursor: pointer !important;
border: 0px!important;
background-color: #ff0000;
background: -o-linear-gradient(top, #333399, #000066);
background: -moz-linear-gradient(top, #333399, #000066);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));
}
.sapCPCartBtn {
background: none\9;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001E5799', endColorstr='#bb7db9e8', GradientType=1 )\9;
/* ie */
box-shadow: none\9 !important;
background-position: 1px 1px \9;
}
Try this and one more thing when you are using filter and border radius in a same class in IE rounded corners will not work... try the below css...
.sapCPCartBtn {width: 205px;padding: 10px;text-align: center;height: 32px; box-shadow: none;color: #FFFFFF !important; font-weight: bold;font-size: 1em !important;-moz-border-radius: 10px !important;-webkit-border-radius: 10px !important; border-radius: 10px !important;-khtml-border-radius: 10px !important;-goog-ms-border-radius: 10px !important;margin-top: 5px;text-align: center;display: inline-block;cursor: pointer!important;border: 0px !important;background-color: #ff0000;background: -o-linear-gradient(top, #333399, #000066);background: -moz-linear-gradient(top, #333399, #000066);background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333399', endColorstr='#000066', GradientType=0 ); /* ie */}
I am using CSS3 pie and am calling it by attached js files just before the head tag.
For some reason my background image inst appearing. I have tried the standard adding z-index and position relative fixes but it doesn't show. Any help guidance appreciated.
Below is the css.
.linkButton {
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #dc5c00;
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-gradient(linear, 0% 0% 0% 100% from(#e36000), to(#c85400));
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -moz-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -ms-linear-gradient(top, #e36000, #c85400);
background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -o-linear-gradient(top, #e36000, #c85400);
-pie-background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #000;
padding: 10px 10px 10px 11px;
display: inline-block;
color: #ffffff;
font-weight: bold;
box-shadow: inset 0 1px 0 0 #ff801e, 0 0 1px 1px #ffffff, 0 0 1px 1px #ffffff;
border: 1px solid #c85400;
text-shadow: #813700 2px 2px 1px;
line-height: 12px;
margin-bottom: 7px;
width: 326px;
display: block!important;
position:relative;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;`enter code here`
z-index:1;
}
First of all you don't need -pie-background for plain old image + background color.
If you do want to use -pie remember that paths are relative to html not css.
(I assume that you've set up mime-type etc and pie works for you in different cases.)
.linkButton{
behavior: url(PIE.htc);
}
Also, try adding a .index file with the following content in the same location as the PIE.htc file:
more info http://css3pie.com/
http://css3pie.com/documentation/
Try linking it without dots and slash like this:
-pie-background: url('Images/linkButtonBg.png') 100% 9px no-repeat #000;