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">
        <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 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.