The top border deals
with the faux-column separator in the same way as the bottom border on the masthead. A
detail of the resulting footer is shown in the following image.
The last three rules are in the images section. The first, a img, removes borders from
linked images. The next, .itemImage img, adds a border to images within the itemImage
divs, and .itemImage img:hover changes the border color on the hover state, indicating
that the link is clickable (seeing as all of the item images are surrounded by links).
As mentioned earlier, this layout also has three style sheets linked via conditional comments
to deal with Internet Explorer issues. The first, ie-hacks.css, has line-height
overrides for h1 and h1+p, which line up the heading and paragraphs properly in
Microsoft??™s browser. A rounding problem causes a horizontal scroll bar to appear at narrow
browser window sizes, so the #mainContent rule??™s width value is overridden with a
setting of 71.9%. Finally, the hr rule defines vertical margin values to make the horizontal
rules in Internet Explorer behave in a similar manner to other browsers.
PUTTING EVERYTHING TOGETHER
385
10
The ie-6lte-hacks.css document has some fixes for Internet Explorer 6 and below. The
#wrapper rule deals with Internet Explorer 6 and below not understanding max-width and
min-width, and uses a Microsoft-proprietary expression to compensate for this failing. The
#content rule is a hasLayout hack, which stops the entire layout from jolting when the
tabs are rolled over.
Pages:
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494