Background color, border vanish based on HTML header
I love PIE! But I was pulling my remaining hair out that PIE would make a div's background color and border vanish. See sample page below. I discovered that by changing the two header lines simply to <html> the problem went away. I'm not sure if this is safe to do to my site (lots of old code). Any explanation / suggestion?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #e3f0cc;
}
#box {
width: 500px;
background-color: #F90;
position: relative;
}
#test {
margin:40px;
background-color:#354d45;
width:222px;
border:solid 4px #c5d2a4;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
behavior: url(PIE.htc);
}
p { margin:8px;}
</style>
</head>
<body>
<div id="box">
<div id="test">
<p>Now is the time<br />
for all good men
</p>
<p>Tom is the time</a></p>
</div>
</div>
</body>
</html>
Forums
