Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

77 lines (63 sloc) 2.282 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 PIE Margin Test</title>
<meta name="robots" content="noindex, nofollow" />
<style type="text/css" media="screen">
.box {
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3+, Chrome */
-khtml-border-radius: 5px; /* Konqueror */
border-radius: 5px; /* Standard. IE9 */
margin: 20px 0;
overflow: hidden;
}
.inside {
background: #fff;
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Saf3+, Chrome */
-khtml-border-radius: 5px; /* Konqueror */
border-radius: 5px; /* Standard. IE9 */
margin: 20px;
}
#test {
behavior: url(../build/PIE.htc);
background: red;
}
#test .inside {
behavior: url(../build/PIE.htc);
}
#test2 {
background: red;
position: relative;
}
#test2 .inside {
behavior: url(../build/PIE.htc);
}
#control {
behavior: url(../build/PIE.htc);
background: green;
}
</style>
</head>
<body>
<h1>Margin/Overflow Treatment with PIE</h1>
<p>These boxes have <code>overflow:hidden</code>. Inside is a <code>div</code> with margin. The expected behavior is for that margin not to collapse (because of the overflow setting).</p>
<div id="test" class="box">
<div class="inside">
This box has PIE on the outside and the inside. This box should be spaced 20px on all sides.
</div><!--/inside-->
</div><!--/test-->
<div id="test2" class="box">
<div class="inside">
This box has PIE on the inside only. This box should be spaced 20px on all sides.
</div><!--/inside-->
</div><!--/test2-->
<div id="control" class="box">
<div class="inside">
This box has PIE on the outside, but not on the inside.
</div><!--/test2-->
</div><!--/test-->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.