
DOCTYPE declaration is breaking gradient/rounded corner
I have "position: relative;" set on my element but I'm having problems getting css3pie to do it's magic when the DOCTYPE declaration is set at the the top of the HTML document. Setting the z-index and the position to relative on the parent element did not fix things either.
Without declaration (broken):
http://prometheuslabor.com/video/pie2.htmlWith declaration (works):
http://prometheuslabor.com/video/pie.htmlCode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.myAwesomeElement {
position: relative;
cursor: pointer;
font-size: 2em;
border: 1px solid #696;
padding: 10px 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);
}
</style>
</head>
<body>
<div class="myAwesomeElement">
kjk<br />
kjksad<br />
</div>
<div class="myAwesomeElement">
kjk<br />
</div>
<div class="myAwesomeElement">
kjk<br />
kjksad<br />
kllk<br />
</div>
</body>
</html>