Menu
Im trying to demo CSS3PIE and it wont work in IE at all.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link href="test.css" type="text/css" rel="stylesheet">
<title>Test</title>
</head>
<body>
<div id="title"></div>
<div id="sub_title"></div>
<div id="main_area">
<div id="date_area"></div>
</div>
</body>
</html>
css:
body{
margin: 0 auto;
}
#title{
margin: 0 auto;
width: 100%;
height: 40px;
background-color: white;
}
#sub_title{
margin: 0 auto;
width: 100%;
height: 25px;
background-color: green;
}
#date_area{
width: 310px;
height: 250px;
border: 1px solid #4A4949;
padding: 60px 0;
text-align: center;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: #707070 2px 2px 4px;
-moz-box-shadow: #707070 2px 2px 4px;
box-shadow: #707070 2px 2px 4px;
background: #EBEBEB;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDEBEB), to(#C9C7C8));
background: -moz-linear-gradient(#EDEBEB, #C9C7C8);
background: linear-gradient(#EDEBEB, #C9C7C8);
-pie-background: linear-gradient(#EDEBEB, #C9C7C8);
behavior: url(/PIE.htc);
}
The result is just a block with a border, no gradient/shadow etc
Any help/solution would be much appreciated.
309
The behavior location should be relative to your HTML file, not your CSS like any other declaration using url(). So assuming your index.html and PIE.htc is in root and your CSS is inside a 'css' folder, you should go like this:
background-image: url(../images/example.jpg);
behavior: url(PIE.htc);
Also, try adding a .htaccess file with the following content in the same location as the PIE.htc file:
AddType text/x-component .htc
Hope this helps.
110
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?
26
CSS3 PIE - Giving IE border-radius support not working?
The PIE.htc requests should respond with the mime type "text/x-component" - or IE won't touch the behaviour.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
