| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| <html> |
| <head> |
| <title>CSS 2.1 Test Suite: display/box/float/clear test</title> |
| <style type="text/css"> |
| html { |
| font: 10px/1 Verdana, sans-serif; |
| background-color: blue; |
| color: white; |
| } |
| |
| body { |
| margin: 1.5em; |
| border: .5em solid black; |
| padding: 0; |
| width: 48em; |
| background-color: white; |
| } |
| |
| dl { |
| margin: 0; |
| border: 0; |
| padding: .5em; |
| } |
| |
| dt { |
| background-color: rgb(204,0,0); |
| margin: 0; |
| padding: 1em; |
| width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */ |
| height: 28em; |
| border: .5em solid black; |
| float: left; |
| } |
| |
| dd { |
| float: right; |
| margin: 0 0 0 1em; |
| border: 1em solid black; |
| padding: 1em; |
| width: 34em; |
| height: 27em; |
| } |
| |
| ul { |
| margin: 0; |
| border: 0; |
| padding: 0; |
| } |
| |
| li { |
| display: block; /* i.e., suppress marker */ |
| color: black; |
| height: 9em; |
| width: 5em; |
| margin: 0; |
| border: .5em solid black; |
| padding: 1em; |
| float: left; |
| background-color: #FC0; |
| } |
| |
| #bar { |
| background-color: black; |
| color: white; |
| width: 41.17%; /* = 14em */ |
| border: 0; |
| margin: 0 1em; |
| } |
| |
| #baz { |
| margin: 1em 0; |
| border: 0; |
| padding: 1em; |
| width: 10em; |
| height: 10em; |
| background-color: black; |
| color: white; |
| } |
| |
| form { |
| margin: 0; |
| display: inline; |
| } |
| |
| p { |
| margin: 0; |
| } |
| |
| form p { |
| line-height: 1.9; |
| } |
| |
| blockquote { |
| margin: 1em 1em 1em 2em; |
| border-width: 1em 1.5em 2em .5em; |
| border-style: solid; |
| border-color: black; |
| padding: 1em 0; |
| width: 5em; |
| height: 9em; |
| float: left; |
| background-color: #FC0; |
| color: black; |
| } |
| |
| address { |
| font-style: normal; |
| } |
| |
| h1 { |
| background-color: black; |
| color: white; |
| float: left; |
| margin: 1em 0; |
| border: 0; |
| padding: 1em; |
| width: 10em; |
| height: 10em; |
| font-weight: normal; |
| font-size: 1em; |
| } |
| |
| .a { color: #999999; } |
| .b { color: #cc0000; } |
| </style> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html" title="9 Visual formatting model"> |
| </head> |
| <body> |
| <dl> |
| <dt> |
| toggle |
| </dt> |
| <dd> |
| <ul> |
| <li> |
| the way |
| </li> |
| <li id="bar"> |
| <p> |
| the world ends |
| </p> |
| <form action="./" method="get"> |
| <p> |
| bang |
| <input value="off" name="foo" type="radio"> |
| </p> |
| <p> |
| whimper |
| <input value="on" name="foo2" type="radio"> |
| </p> |
| </form> |
| </li> |
| <li> |
| i grow old |
| </li> |
| <li id="baz"> |
| pluot? |
| </li> |
| </ul> |
| <blockquote> |
| <address> |
| bar maids, |
| </address> |
| </blockquote> |
| <h1> |
| sing to me, erbarme dich |
| </h1> |
| </dd> |
| </dl> |
| <p style="color: black; font-size: 1em; line-height: 1.3em; clear: both"> |
| This is a nonsensical document, but syntactically valid HTML 4.0. All 100%-conformant CSS1 agents should be able to render the document elements above this paragraph indistinguishably (to the pixel) from this |
| <a href="support/css1test5526c.png" class="a">reference rendering,</a> |
| (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings. |
| Please <a href="mailto:public-css-testsuite@w3.org" class="b">report any errors</a> you find between the CSS and the reference rendering. |
| </p> |
| </body> |
| </html> |
