Skip to content
This repository
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 77 lines (63 sloc) 2.282 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
<!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>
Something went wrong with that request. Please try again.