1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: display/box/float/clear test</title>
5 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#clear">
6 <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html">
7 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch">
8 <style type="text/css">
9 html {
10 font: 10px/1 Verdana, sans-serif;
11 background-color: blue;
12 color: white;
13 }
14
15 body {
16 margin: 1.5em;
17 border: .5em solid black;
18 padding: 0;
19 width: 48em;
20 background-color: white;
21 }
22
23 dl {
24 margin: 0;
25 border: 0;
26 padding: .5em;
27 }
28
29 dt {
30 background-color: rgb(204,0,0);
31 margin: 0;
32 padding: 1em;
33 width: 10.638%; /* refers to parent element's width of 47em. = 5em or 50px */
34 height: 28em;
35 border: .5em solid black;
36 float: left;
37 }
38
39 dd {
40 float: right;
41 margin: 0 0 0 1em;
42 border: 1em solid black;
43 padding: 1em;
44 width: 34em;
45 height: 27em;
46 }
47
48 ul {
49 margin: 0;
50 border: 0;
51 padding: 0;
52 }
53
54 li {
55 display: block; /* i.e., suppress marker */
56 color: black;
57 height: 9em;
58 width: 5em;
59 margin: 0;
60 border: .5em solid black;
61 padding: 1em;
62 float: left;
63 background-color: #FC0;
64 }
65
66 #bar {
67 background-color: black;
68 color: white;
69 width: 41.17%; /* = 14em */
70 border: 0;
71 margin: 0 1em;
72 }
73
74 #baz {
75 margin: 1em 0;
76 border: 0;
77 padding: 1em;
78 width: 10em;
79 height: 10em;
80 background-color: black;
81 color: white;
82 }
83
84 form {
85 margin: 0;
86 display: inline;
87 }
88
89 p {
90 margin: 0;
91 }
92
93 form p {
94 line-height: 1.9;
95 }
96
97 blockquote {
98 margin: 1em 1em 1em 2em;
99 border-width: 1em 1.5em 2em .5em;
100 border-style: solid;
101 border-color: black;
102 padding: 1em 0;
103 width: 5em;
104 height: 9em;
105 float: left;
106 background-color: #FC0;
107 color: black;
108 }
109
110 address {
111 font-style: normal;
112 }
113
114 h1 {
115 background-color: black;
116 color: white;
117 float: left;
118 margin: 1em 0;
119 border: 0;
120 padding: 1em;
121 width: 10em;
122 height: 10em;
123 font-weight: normal;
124 font-size: 1em;
125 }
126
127 .a { color: #999999; }
128 .b { color: #cc0000; }
129 </style>
130 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html" title="9 Visual formatting model">
131 </head>
132 <body>
133 <dl>
134 <dt>
135 toggle
136 </dt>
137 <dd>
138 <ul>
139 <li>
140 the way
141 </li>
142 <li id="bar">
143 <p>
144 the world ends
145 </p>
146 <form action="./" method="get">
147 <p>
148 bang
149 <input type="radio" name="foo" value="off">
150 </p>
151 <p>
152 whimper
153 <input type="radio" name="foo2" value="on">
154 </p>
155 </form>
156 </li>
157 <li>
158 i grow old
159 </li>
160 <li id="baz">
161 pluot?
162 </li>
163 </ul>
164 <blockquote>
165 <address>
166 bar maids,
167 </address>
168 </blockquote>
169 <h1>
170 sing to me, erbarme dich
171 </h1>
172 </dd>
173 </dl>
174 <p style="color: black; font-size: 1em; line-height: 1.3em; clear: both">
175 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
176 <a class="a" href="support/css1test5526c.png">reference rendering,</a>
177 (except font rasterization and form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings.
178 Please <a class="b" href="mailto:public-css-testsuite@w3.org">report any errors</a> you find between the CSS and the reference rendering.
179 </p>
180 </body>
181 </html>