htmlcssinternet-explorercss3pie

Unable to apply CSS PIE style to IE.*

I'm having trouble getting CSS PIE to work with IE 6-8 (9-10 untested). I'm trying to get the "selected" style to apply. Can anyone see where this is going wrong?

Cheers

chrome+ff - fine enter image description here

ie result = bad enter image description here

   <div class="tabBox">
        <ul class="tabs">
            <li id="step1" class="selected"><a href="#"><span class="tabTitle">STEP 1:</span><span class="tabSubtitle">Step 1</span></a></li>
            <li id="step2"><a href="#"><span class="tabTitle">STEP 2:</span><span class="tabSubtitle">Step 2</span></a></li>
            <li id="step3"><a href="#"><span class="tabTitle">STEP 3:</span><span class="tabSubtitle">Step 3</span></a></li>
        </ul>
        <div class="content">
        </div>
    </div>

.tabBox 
{
padding: 0 3px;
font-size: 12px;
font-family: sans-serif;

}

.tabBox .tabs 
{
margin: 0;
overflow: hidden;
margin-bottom: -1px;
border-width:1px;
}

.tabBox .tabs li 
{
float: left;
list-style: none;
margin: 0;
padding: .25em .15em 0; 
overflow: hidden;
position: relative;
z-index: 1;
margin-right: 7px;
}

.tabBox .tabs a {
float: left;
height: 3em;
line-height: 2em;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;
background: #cbc3b7; 
background: -moz-linear-gradient(top,  #cbc3b7 0%, #c4bdb1 84%, #aea79e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbc3b7), color-stop(84%,#c4bdb1), color-stop(100%,#aea79e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* IE10+ */
background: linear-gradient(top,  #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* W3C */   
-pie-background: linear-gradient(top,  #cbc3b7 0%,#c4bdb1 84%,#aea79e 100%); /* W3C */
border: 1px solid #CCC;
border-bottom: 0;
padding: 0 10px;
padding-top:7px;
color: #000;
text-decoration: none;
behavior: url(../Content/behaviours/PIE_uncompressed.htc);
width: 218px;
margin: -1px;  
 }

.tabBox .tabs a span
{
padding-left:12px;
}


.tabBox .tabs .selected a 
{
background: -ms-linear-gradient(top,  #cbc3b7 0%,#c4bdb1 84%,#000000 100%);
background: #ece9e6;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
}

.tabBox .tabs li 
{
float: left;
list-style: none;
margin: 0;
padding: .25em .15em 0;
overflow: hidden;
position: relative;
z-index: 1;
margin-right: 7px;     
}

.tabBox .tabs a span
{
padding-left:12px;

}
Solution

  • Pie requires the properties being polyfilled to be prefixed with -pie-, so you should write:

    .tabBox .tabs .selected a 
{
background: -ms-linear-gradient(top,  #cbc3b7 0%,#c4bdb1 84%,#000000 100%);
-pie-background: linear-gradient(top,  #cbc3b7 0%,#c4bdb1 84%,#000000 100%);
background: #ece9e6;
-webkit-box-shadow: #CCC 0 0 .25em;
-moz-box-shadow: #CCC 0 0 .25em;
-pie-box-shadow: #CCC 0 0 .25em;
box-shadow: #CCC 0 0 .25em;
}