3d buttons in IE8 - css

Question

I am using css3pie to make IE8 and IE7 recognize more css declarations. This allows me to more easily use background gradients and similar on my site. However, I have found out that css3pie does not support the box-shadow style for inset shadows. This is a problem as I am using box shadows to make the buttons and interface elements on my site look 3d, like this:
a {
box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
-moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
-webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
}
a:hover {
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
-moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(124, 124, 124, 1);
}
Here is a jsfiddle of the search bar from the site in action. I haven't included all the css, but the important thing in the background + border of the search bar, and the background + border + hover effects of the search button.
Here is the html + css:
<div class="searchbar">
<span class="searchFor" id="searchFor">search for</span>
<input id="txtSearch" type="text"/>
<span class="btn">
search
</span>
</div>
.searchbar {
padding:.75em;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #ffd07d; /* fallback color if gradients are not supported */
background-image: -webkit-gradient(linear, left top, left bottom, #ffd07d, to(#ffa300));
background-image: -webkit-linear-gradient(top, #ffd07d, #ffa300);
background-image: -moz-linear-gradient(top, #ffd07d, #ffa300);
background-image: -ms-linear-gradient(top, #ffd07d, #ffa300);
background-image: -o-linear-gradient(top, #ffd07d, #ffa300);
-pie-background: linear-gradient(#ffd07d, #ffa300);
background-image: linear-gradient(top, #ffd07d, #ffa300);
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
-moz-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
-webkit-box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.8);
border: {
style:solid;
width:1px;
color: rgba(255,165,6,0.63);
}
behavior: url(PIE.htc); // ie hack: see http://css3pie.com
}
.btn {
margin-left:1em;
display:inline-block;
vertical-align:middle;
font-size:130%;
margin-right:0.5em;
}
.btn a {
padding: 0.2em 0.8em 0.2em 0.8em;
color: #ffffff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
background-color: #969696;
background-image: -webkit-gradient(linear, left top, left bottom, #969696, to(#080808));
background-image: -webkit-linear-gradient(top, #969696, #080808);
background-image: -moz-linear-gradient(top, #969696, #080808);
background-image: -ms-linear-gradient(top, #969696, #080808);
background-image: -o-linear-gradient(top, #969696, #080808);
-pie-background: linear-gradient(#969696, #080808);
background-image: linear-gradient(top, #969696, #080808);
behavior: url(PIE.htc);
box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5), inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
-moz-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
-webkit-box-shadow: inset -2px -2px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
}
.btn a:hover {
box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
-moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
-webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.5),inset 0px 0px 0px 1px rgba(8, 8, 8, 1);
}
I need to do is somehow replace the box-shadow syntax with something else. What should I use? I'm pretty new to css + web development, so I don't really know what options I have available to me. Alternatively, is there a different approach I should take to the whole problem?

Answer 1

CSS3 Pie is sort of buggy. Try adding a position:relative;, and see what that does. Box-shadow should be supported in PIE.
Also, are you using a CSS framework? Otherwise your CSS isn't valid, as you cannot nest styles the way you do. Simply use shorthand:
border:solid 1px rgba(255,165,6,.63);
You can probably also ditch the first -webkit gradient, as it is only used in older Webkit browsers, which are in rapid decline.