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: Table Cell Vertical Alignment with Specified Height</title>
5 <link rel="author" title="L. David Baron" href="href://dbaron.org/">
6 <link rel="alternate" href="http://dbaron.org/css/test/2007/height-of-cell-box">
7 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
8 <link rel="alternate" href="http://www.brunildo.org/test/td_height1.html">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#height-layout">
10 <meta name="flags" content="">
11 <meta name="assert" content="Vertical alignment in table cells works whether or not that cell has a specified height.">
12 <style type="text/css">
13 .control {
14 width: 20px;
15 height: 30px;
16 border: solid blue 35px;
17 border-style: solid none;
18 background: yellow;
19 }
20 table, .control {
21 float: left;
22 border-spacing: 0;
23 }
24 td {
25 background: blue;
26 padding: 0;
27 }
28 .content {
29 width: 20px;
30 height: 30px;
31 background: yellow;
32 color: yellow;
33 }
34 .one { height: 100px; }
35
36 .middle td { vertical-align: middle; }
37 .baseline td { vertical-align: baseline; }
38 .baseline .two .content { margin-top: 35px; }
39 </style>
40 </head>
41 <body>
42 <p>There must be a single yellow stripe across the blue box.</p>
43 <div class="container">
44 <div class="control"></div>
45 <table class="middle"><tr>
46 <td class="one"><div class="content"></div></td>
47 <td class="two"><div class="content"></div></td>
48 </tr></table>
49 <table class="baseline"><tr>
50 <td class="one"><div class="content">A</div></td>
51 <td class="two"><div class="content">B</div></td>
52 </tr></table>
53 </div>
54 </body>
55 </html>