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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!-- http://www.bath.ac.uk/%7Epy8ieh/a/internet/projects/mozilla/widgets/ -->
<html>
<head>
<title>Mozilla Tests: Styled Widgets Eleven</title>
<style type="text/css">
div.right, div.left { width: 100px; height: 30px; background: green; color: white; }
div.left { float: left; } div.right { float: right; }
.center, input { display: block; margin: auto; width: 300px; }
input.left { margin-left: 0; } input.right { margin-right: 0; }
p, hr { clear: both; }
div { padding: 5px; border: solid; }
</style>
</head>
<body>
<H1>Styling Widgets! 11</H1>
<p>In all these tests, INPUT should act as a BLOCK element because it
is given 'display:block' in the stylesheet.</p>
<p>In the following test case there a centered INPUT element.</p>
<div>
<input type="text" value="I am centered with 'margin:auto'.">
</div>
<p>In the following test case, there is the same INPUT but this time
it is next to a float. <em>The INPUT should be in the same place!</em></p>
<div>
<div class="right">I float.</div>
<input type="text" value="I am centered with 'margin:auto'.">
</div>
<p>This problem does not seem to occur with left floated images: </p>
<div>
<div class="left">I float.</div>
<input type="text" value="I am centered with 'margin:auto'.">
</div>
<p>Similarly, if we right align the INPUT, the INPUT does
not go under the floated block as it should:</p>
<div>
<div class="right">I float.</div>
<input class="right" type="text" value="I am right aligned with 'margin-left:auto'.">
</div>
<p>In this case, though, the problem <em>does</em> appear for the left
case: </p>
<div>
<div class="left">I float.</div>
<input class="left" type="text" value="I am left aligned with 'margin-right:auto'.">
</div>
<hr>
<p><a href="10.html">Prev</a> <a href="12.html">Next</a></p>
</body>
</html>
|
