The various blockquote and cite rules are variants on the
method shown in Chapter 3??™s ???Creating pull quotes in CSS??? exercise. Again, somewhat
complex line-height and margin values are used to take into account the baseline grid.
Finally, the images section has four rules. The first, a img, removes borders from linked
images. Next, #content img applies a one-pixel border to images within the content div.
After that, the img.leadImage rule floats the image after the main heading right, adding
some margins at the bottom and left edges to ensure there??™s some whitespace between
the image and other content. And then .columnLeft img, .columnRight img sets the
images within the columns to display as block, which removes the default overhang
browsers that otherwise apply to images (as they do to text). The margin-bottom value
ensures subsequent content is aligned with the baseline grid. Note that the height of the
images, as defined in HTML, is 70 pixels. Add two pixels from the borders and you have 72,
a multiple of 18, ensuring that the actual images adhere to the baseline grid, too??”at least
when browsers are at their default settings.
.columnLeft img, .columnRight img {
display: block;
margin-bottom: 1.8em;
}
In terms of Internet Explorer fixes, few things are needed for this layout. For iehacks.
css, Internet Explorer??™s problems dealing with hr margins are dealt with by providing
new margin-top and margin-bottom values.
Pages:
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501