Forums
View unanswered posts | View active topics It is currently Fri Apr 18, 2014 3:35 pm



Reply to topic  [ 5 posts ] 
 Background color, border vanish based on HTML header 
Author Message

Joined: Thu May 26, 2011 11:15 am
Posts: 5
Post 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>


Thu May 26, 2011 12:03 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Background color, border vanish based on HTML header
http://css3pie.com/documentation/known-issues/#z-index


Thu May 26, 2011 12:27 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: Background color, border vanish based on HTML header
FYI the reason removing the doctype makes the issue go away is because IE8 treats z-index differently in quirks vs. standards modes. Quirks mode has a bug in how it handles z-index that masks the issue.


Thu May 26, 2011 12:29 pm
Profile

Joined: Thu May 26, 2011 11:15 am
Posts: 5
Post Re: Background color, border vanish based on HTML header
Thank you, Jason. Got to love IE!


Thu May 26, 2011 12:58 pm
Profile

Joined: Thu May 26, 2011 11:15 am
Posts: 5
Post Re: Background color, border vanish based on HTML header
Setting z-index of 1 for #box and 2 for #test fixes the problem, so that gives me a work-around.


Thu May 26, 2011 1:00 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: Yahoo [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.