Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 25th of February 2018 10:25:17 PM

A.2. Tips, Pointers, and Other Practical Advice

Once you've gotten through all the general information and checked your documents for errors, the size of the overall margin of an element. Vertically adjacent margins of block-level elements are collapsed to be as large as the largest margin, whereas inline elements effectively do not take margins (they are allowed, but have no effect on page layout). Only the left and right margins of inline elements have any effect, and are not collapsed. Margins set on floated elements are not collapsed with other margins under any circumstance. Negative values are permitted, but caution is recommended.

margin-bottomIE4 P/P IE5 P/Y NN4 N/N Op3 Y/-

This sets the size of the bottom margin you'll probably be looking for some real-world advice on how to use CSS, where some pitfalls may be, and why your letter-perfect CSS isn't displaying in quite the way you think it should.

A.2.1. Style Sheets Reference Guide (SSRG)

http://www.webreview.com/style/index.shtml

This site is home of the Browser Compatibility Charts, which is its main claim to fame. The Chart is a listing of every property and value in CSS1 and the status of its support in each of several major browsers, with notes explaining the ratings. As of this writing, the Chart covered 10 major browser versions, with more expected, and there were plans afoot to add CSS2 support tracking to the charts as well.

The SSRG is also the home of the Web Review column "A Sense of Style," with archives of all the articles, and sections devoted to CSS question and answers, common mistakes with CSS, cool ways to use styles, and more. (Disclaimer: the SSRG is edited and maintained by the author of this book.)

A.2.2. CSS Pointers Group (CPG)

http://css.nu/

Maintained by CSS gurus Sue Sims and Jan Roland Eriksson, the CPG is a wonderful collection of articles, bug reports, workarounds, and literally hundreds of other resources. Many of the pointers listed are simply links to material generated by various people throughout the Web, but some of the best articles are the work of Sue and Roland themselves. The site can be a little difficult to navigate at first, but the enormous wealth of information available through these pages makes the effort well worth it.

A.2.3. WSP CSS Samurai Reports

http://www.webstandards.org/css/

A series of documents detailing the major failings in CSS support in available web browsers, written by the CSS Action Committee -- or, as they are sometimes called, the "CSS Samurai" -- of the Web Standards Project (WSP). As of this writing, there were reports covering Internet Explorer for both Windows and Macintosh, and Opera for Windows. These reports offer an interesting insight into what can go wrong in browser support, what designers want to see, and how to test for CSS support problems.

A.2.3.1. Agitprop

http://style.cleverchimp.com/

A small collection of articles and observations written by Todd Fahrner, this site is a gold mine of detailed information. Each and every one of the articles here contains information CSS authors can use and should know by heart, from "The Amazing em Unit" to "Why Points Suck." This site should be visited by anyone serious about understanding the design trade-offs inherent in any design project, and the special issues surrounding CSS design in particular.



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

using text-align is to wrap a DIV around the image, and set the DIV 's contents to be centered:

<DIV STYLE="text-align: center;">
<IMG SRC="shiny.gif" ALT="Shiny object">
</DIV>

As Figure 4-14 shows, this will center the image.

Figure 4-14

Figure 4-14. Centering images the hard way

or a percentage value, but never both. The keywords are a mix of thefamiliar and unfamiliar: baseline (the defaultvalue), sub, super,bottom , text-bottom ,middle, top, andtext-top. We'll examine how each works inturn.

4.1.3.1. Baseline alignment

wholly transparent, and this will cause the image to be combined withthe background color. In addition, if the image fails to load forsome reason, the user agent will use the background color specifiedin place of the image. Consider how the "starryparagraph" example would look if the background image failed toload, as in
Figure 6-26.

Figure 6-26

Figure 6-26. The consequences of a missing background image

Given this reason alone, it's always a good idea to specify abackground color when using a background image, so that your white