
css3pie.com works fine in IE7 but generated CSS does not
I've been trying to generate a rounded box which uses border-radius, box-shadow and linear-gradient.
the
http://css3pie.com/ has a great demo of a green gradient box which works fine in all browses I tried (including IE7 - which most of my Medical client use).
Gererated CSS3 shows as:
#box { ( I added this)
border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/pie/PIE.htc);
} (I added this)
So in html page I just add <div id="box">Test<br>Test<br>code added</div> and the box looks fine in the latest Chrome, but it shows a square box and no linear-gradient with IE7.
I looked at the code in css3pie.com/ page and the CSS3, which controls the gradient etc., is remmed out and there's lots of Script at the end of the html seemingly controlling the IE6-9 conversion.
I'm using PIE 2.0 by the way.
Can anyone tell me where I'm going wrong. I'd be really grateful if someone could give me sample CSS3 to achieve these three styles, html and a pointer to the correct PIE version. And whether I need anything else - such as modernizr.
Many thanks
mike