css - 3d buttons in IE8 -

i using css3pie make ie8 , ie7 recognize more css declarations. allows me more use background gradients , similar on site. however, have found out css3pie not support box-shadow style inset shadows. problem using box shadows make buttons , interface elements on site 3d, 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 jsfiddle of search bar site in action. haven't included css, important thing in background + border of search bar, , background + border + hover effects of search button.

here html + css:

<div class="searchbar">     <span class="searchfor" id="searchfor">search for</span>     <input id="txtsearch" type="text"/>     <span class="btn">         <a href="javascript:void(0)" id="lnksearch" onclick="javascript:searchclick()">search</a>     </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 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 {     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 somehow replace box-shadow syntax else. should use? i'm pretty new css + web development, don't know options have available me. alternatively, there different approach should take whole problem?

css3 pie sort of buggy. try adding position:relative;, , see does. box-shadow should supported in pie.

also, using css framework? otherwise css isn't valid, cannot nest styles way do. use shorthand:

border:solid 1px rgba(255,165,6,.63); 

you can ditch first -webkit gradient, used in older webkit browsers, in rapid decline.