forked from DerOperator/PositionIsEverything
-
Notifications
You must be signed in to change notification settings - Fork 0
/
posbugs.html
executable file
·375 lines (304 loc) · 9.75 KB
/
posbugs.html
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Going Absolutely buggy</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content=" This demo shows absolute positioning variance and bugs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
<style type="text/css">
html {margin: 0; padding: 0;}
body {margin: 0; padding: 0; font-family: verdana, sans-serif; font-size: 80%;
background: #eff; height: 60em;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
a {border: 0; color: #000;}
p {margin: 5px 10px;}
img {Position: absolute;}
img#moz {top: 290px; left: 30px;}
img#ie {top: 390px; left: 30px;}
img#op6 {top: 490px; left: 30px;}
img#omni {top: 590px; left: 30px;}
div#mozcaption {position: absolute; top: 290px; left: 125px; width: 90px; font-size: .9em;}
div#iecaption {position: absolute; top: 390px; left: 125px; width: 90px; font-size: .9em;}
div#opcaption {position: absolute; top: 490px; left: 125px; width: 90px; font-size: .9em;}
div#omnicaption {position: absolute; top: 590px; left: 87px; width: 118px; font-size: .9em;}
h1 {
font-size: 22px;
text-align: center;
border-bottom: 3px solid #fff;
background: #000;
margin: 0;
color: #fff;
padding: 3px;
}
h2 {
font-size: 1.2em;
text-align: center;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
background: #966;
margin: .2em 0;
color: #ffa;
padding: 3px;
}
h3 {
margin: 15px 0 7px;
font-size: 1.1em;
}
/**** Demo rules ****/
#rightcol {
position: absolute;
top: 90px;
left: 220px;
right: 1.5em;
border: 1px solid #000;
padding: 15px;
background: #ffd;
margin-right/* hide from IE5.0/Win */ : 1.5em;}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
The previous rule and the following rule is for the purpose of making IE5/mac honor the 1.5em
spacing on the right side of #rightcol. IE5/mac does not obey the 'right' property at all. It does
obey 'margin-right' but IE6/win does not (because of the opposing 'left' property). The rule below
withholds the 'right' value from Moz, and also re-feeds the 'margin-right' to IE5/mac, which fails to
read it in the previous rule, along with IE5.win. Good Ghod, has it really come to this?
http://www.dzr-web.com/misc/ie-right-positioning/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
html>body #rightcol {
right: 0;
margin-right: 1.5em;
}
/************** rules for demo ******************/
#content-area {
height:100%;
width:100%;
background: #999;
color: #9fc;
}
#container {
position: absolute;
top: 90px;
left: 30px;
width: 80px;
height: 80px;
background: #bde;
padding: 20px;
border: 20px solid #c33;
}
* html #container { /* Only IE sees these rules, but the escapes '\' hide the second pair from IE5.x/win */
width: 160px;
height: 160px;
w\idth: 80px;
hei\ght: 80px;
}
/**** The above is the Tan hack to fix the IE5.x box model error.
http://css-discuss.incutio.com/?page=BoxModelHack See: 'A Modified SBMH' ****/
#leftbox {
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
background: #23f;
border: 12px solid #000;
}
* html #leftbox {
width: 64px;
height: 64px;
w\idth: 40px;
he\ight: 40px;
}
#rightbox {
position: absolute;
bottom: 0px;
right: 0px;
width: 40px;
height: 40px;
background: #acb;
border: 12px solid #262;
}
* html #rightbox {
width: 64px;
height: 64px;
w\idth: 40px;
he\ight: 40px;
}
#innerleft {
position: absolute;
top: 0px;
left: 0px;
width: 8px;
height: 8px;
background: #a53;
border: 4px solid #ff8;
}
* html #innerleft {
width: 16px;
height: 16px;
w\idth: 8px;
he\ight: 8px;
}
#innerright {
position: absolute;
bottom: 0px;
right: 0px;
width: 8px;
height: 8px;
background: #f00;
border: 4px solid #fff;
}
* html #innerright {
width: 16px;
height: 16px;
w\idth: 8px;
he\ight: 8px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/init.js"></script>
</head>
<body>
<h1>
Going Absolutely Buggy
</h1>
<h2>
Absolute boxes inside absolute boxes
</h2>
<!-- start of demo -->
<div id="container">
<div id="leftbox">
<div id="innerleft"></div>
</div>
<div id="rightbox">
<div id="innerright"></div>
</div>
<div id="content-area"></div>
</div>
<!-- end of demo -->
<img src="images/Moz1.gif" width="80px" height="80px" id="moz" />
<div id="mozcaption">
Mozilla 1,<br />IE5/Mac,<br />Opera 7
</div>
<img src="images/IE5.5.gif" width="80px" height="80px" id="ie" />
<div id="iecaption">
IE5.5/Win<br />IE6/Win
</div>
<img src="images/Op6.gif" width="80px" height="80px" id="op6" />
<div id="opcaption">
Op6/Win<br />Op6/mac
</div>
<img src="images/omniweb.gif" width="42px" height="82px" id="omni" />
<div id="omnicaption">
Omniweb.<br /><br />
Op6 has competition.
</div>
<div id="rightcol">
<p class="alignright">
<a href="index-2.html"><strong>Return to p.i.e.</strong></a>
</p>
<h3>The demo</h3>
<p>
This one is based entirely on absolute positioning. div#container
(thick brown border) is positioned using 'left' and 'top', and has equal width and height (80px).
It contains two absolute boxes, (black and green borders) and a static div to show the
content area, (grey box) and thus the padding area as well (light blue around grey box).
<strong>Note:</strong> Without the fixed dimensions on div#container, browser behavior
would vary wildly. See <a href="abs_relbugs.html">Absolutely Buggy II</a> to view this behavior.
</p>
<p>
The green and black bordered boxes are positioned to opposite corners by applying '0px'
on top/left and bottom/right respectively. They each enclose a small box positioned
the same way. All boxes are dimensioned as squares, and Tan hack (for the IE5.x incorrect box model,
see source) is applied to all the boxes.
</p>
<p>
Below are screenshots of this demo.
</p>
<h3>The behaviors</h3>
<p>
It is assumed that earlier browsers will have 'difficulties' with this demo.
</p>
<p>
The mighty Gecko engine (Moz, N6/7) renders flawlessly.
IE5/Mac appears identical to Moz. Opera 7 is also correct.
</p>
<p>
IE/Win is close, considering it's IE. But notice those vertically stretched small boxes?
It appears that IE will not allow the 'height' of these absolute boxes to be less than the 'line-height'.
However, this applies only to the big and little boxes. The middle sized boxes will strangely
honor 'height:0px'.
</p>
<p>
However, such a bug will only rarely affect a page. Not so with Opera 6.
</p>
<h3>Oh, my aching back!</h3>
<p>
Please note that in Op6 the black and green bordered
boxes are (as one unit)
exactly the same size as the grey content area. (!) It would seem that Opera is rendering the demo
by first placing the container without any padding or borders. Then the contained absolute boxes
are placed accordingly. Finally, the specified padding and borders are applied to the container box,
which stretches it down and right <em>without affecting those contained boxes.</em>
The same goes for the little boxes.
</p>
<p>
This is a big problem (if you care about Op6). Don't assume you'll correct it with a wrapper div either,
because the bug will infect that div as well.
</p>
<h3>The Fix</h3>
<p>
Don't use borders or padding on such a container. If you must,
an absolutely positioned div may be positioned over (or under) the container,
so as to provide 'substitute' borders and padding.
</p>
<p>
Happily, Opera 7 has fixed this problem, and now plays nice with absolute positioning.
Bow thrice in the direction of Norway, please.
</p>
<h3>Whoops!</h3>
<p>
Those using Op7.1 may notice that the demo is missing its grey content area, supplied by a nested div BG.
This was pointed out to me by
<a href="http://www.designdetector.com/"><strong>Chris Hester</strong></a>.
See <a href="op-omnibus/boxbug.html"><strong>this page</strong></a> for details on a brand new Opera bug!
</p>
<h3>Update January 2007</h3>
<p>
According to reports, the more recent <strong>Omniweb</strong> versions correctly
display the demo on this page. Way to go, guys!
</p>
<h3>Update July 2008</h3>
<p>
All the modern browsers now handle this demo properly, and IE7 has corrected IE's
"no box shorter than the lineboxes" problem as well, so it too exactly matches the others.
Well, that's one battle won...
</p>
<br />
<p class="small alignright">
<a href="design/index.html"
title=" Big John's Advanced CSS Design "><strong>Big John Design</strong></a>
<a href="https://github.com/DerOperator/PositionIsEverything/issues">Contact Us</a>
©positioniseverything.net<br />
Last updated: July 4, 2008<br />
Created June 2, 2002
</p>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-39235363-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>