Monday 19th of March 2018 08:01:35 AM

Now let's consider an example where the margins of a list item, an unordered list, and a heading are all collapsed. In this case, the unordered list and heading will be set to have negative margins:

The larger of the two negative margins (-18px ) is added to the largest positive margin (20px ), yielding (20px-18px = 2px ). Thus, there are only two pixels between the bottom of the list item's content and the top of the paragraph's content. This is what we see in Figure 8-24.

CSS Style Guide

XHTML and CSS Validation

Before publishing any XHTML page on the library’s server, you must be certain that it contains only W3C-approved tags and properly authored Style Sheets. The process of Kosherizing your XHTML and CSS is known as validation.

Free online tools

Free online tools make validation easy. Just follow these steps:

  1. Upload your page to the library’s server but do not yet link to it externally.
  2. Visit the W3C Validator (or the HTML Help Validator maintained by the Web Design Group).
  3. Type the URL of the web page you just uploaded into the forms at either of these services.
  4. Wait a few seconds while the validator examines your page.
  5. Fix any errors offline, upload the corrected page, and try again.
  6. Be sure to validate your CSS as well and correct errors (if any).
  7. When all documents validate, you may link to your page from the library’s site. (If you are unable to understand or correct your errors, see the Web Coordinator.)

Validation takes getting used to, but soon the process will become second nature. Essentially it is like receiving the consulting services of a world-class HTML and CSS expert for free.

Understanding Validator Error Messages

Note that the Validators’ error-reporting can be confusing. Sometimes an error in one part of the markup gets reported as an error further down.

For instance, if the validator is coughing on a paragraph tag, and the tag appears to be written correctly, check the markup preceding the paragraph tag. Higher up on the page, you may have forgotten to include a closing quotation mark at the end of a link, or you may have neglected to end an IMAGE tag with a a closing forward slash (/). For some reason, the Validator catches these errors, but reports them incorrectly.

One-click validation

If you tire of typing the validation service URLs, you can install free validation "bookmarklets" in your browser’s Favorites bar courtesy of David Lindquist, an independent web developer.

« XHTML Section Index | Cascading Style Sheets »

section) have been examples of absolute positioning, we're already halfway to an understanding of how it works. Most of what remain are the details of what happens when absolute positioning is invoked.

When an element is positioned absolutely, it is completely removed from the document flow. It is then positioned with respect to its containing block, and its edges are placed using the side-offset properties. The positioned element does not flow around the content of other elements, nor does their content flow around the positioned H4 {color: #808080;} /* set H4's to be medium gray */

If you aren't familiar with this notation, here's a quickprimer. First, hexadecimal means base-16counting, so the basic unit is groups of 16, not the groups of 10 towhich we're accustomed. In hexadecimal numbering, the validdigits are 0 through 9 andA through F. Once you'vereached F, the next number is 10. Thus, a childlearning to count in hex would learn this basic progression: