In the following
example, the overall width taken up by the box should be the sum of its border, padding,
and width values (420px). (Note that when using shorthand, you need to be mindful that
the amount of space they take up is double the value. In other words, if you set padding
to 50px, 50 pixels of padding is applied to both horizontal edges. Therefore, in the following
code block, the sum to find the overall width of the values in the rule is 300 + 50 + 50
+ 10 + 10.) However, in Internet Explorer 5.x, the box is only 300 pixels wide??”the padding
and border are placed inside the defined width, leaving only 180 pixels for content. This
issue tends to affect most CSS-based layouts.
.boxout {
width: 300px;
padding: 50px;
border: 10px solid #000000;
}
Solution: Override the width setting by setting a new value in the style sheet attached via
a conditional comment. The value should take into account the shortcomings listed previously
and therefore needs to equal the value of the relevant dimension (depending on
whether you??™re defining a width or a height), along with the relevant padding and border
values.
.boxout {
width: 420px;
}
DEALING WITH BROWSER QUIRKS
359
9
Centering layouts
Problem: The browser doesn??™t understand margin: auto, so when, for example, a wrapper
is horizontally centered using the following code block, the resulting layout will be incorrectly
aligned to the left of the browser window.
Pages:
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463