About Bottom of the cascade

Always at the bottom of the cascade hierarchy is the browser’s own default style sheet. Typically,
the browser style sheet will have default settings for headings, paragraphs, lists, and all common
(X)HTML elements. It is the browser style sheet that makes links blue and visited links purple.
View any page in your browser that isn’t styled with CSS, and you will see the default browser styles.
So long as you define all the elements you wish to control, the default browser CSS will be
overridden. Remember that the default styling was designed for numerous reasons, specifically
legibility, accessibility, and common understanding. It is up to you to integrate these accepted
conventions into your designs, and seek to improve them, not disregard them.

Installing multiple versions of browsers

One of the big problems when it comes to web design testing is that some browser manufacturers
don’t enable you to run multiple versions of their products. The two biggest
culprits here are, unsurprisingly, Microsoft and Apple, who presumably argue that as their
browsers rely on system-level code, they can’t provide standalone testing environments
for older releases. Luckily, enterprising developers have proven this to not be the case.
Online, there are now a number of sites that enable you to install standalone versions of
previous incarnations of Internet Explorer. By far the best is Tredosoft’s effort, which packages
everything up into a no-nonsense installer. This enables you to install standalones for
Internet Explorer versions from 6 way back to 3 (the following image shows an example of
three versions of Internet Explorer running simultaneously). Usefully, conditional comments
work fine, too, which wasn’t the case with earlier standalones. Download the
installer from www.tredosoft.com/Multiple_IE. Alternatively, you can manually install the
versions you require from Evolt (http://browsers.evolt.org/) and use the information
at Position Is Everything (www.positioniseverything.net/articles/multiIE.html) to
repair lost functionality.
In a similar vein, Michel Fortin has produced standalone versions of Safari for the Mac,
available from www.michelf.com/projects/multi-safari/. However, because of the
nature of WebKit (the application framework that’s the basis for Safari), there are limitations
regarding which versions of the browser can be run on which versions of Mac OS X.
David Hellsing of David’s Kitchen also notes in his “Browser Suite for Developers” article
(www.monc.se/kitchen/91/browser-suite-for-developers) that you can use the WebKit
nightly builds instead of the public downloads, in order to test in multiple versions of
Safari. Links are available from the article.
Elsewhere, things are simpler. For Firefox, different versions can happily live on the same
machine, although they can’t be run simultaneously, unless you start each version with a
different profile—see “Geek to Live: Manage Multiple Firefox Profiles,” by Gina Trapani
(www.lifehacker.com/software/firefox/geek-to-live--manage-multiple-firefox-å
profiles-231646.php), for how to do this on Windows; and “Running Multiple
Firefox Versions Concurrently,” by Jeroen Coumans (www.jeroencoumans.nl/journal/
multiple-firefox-versions), for how to do this on Mac OS X. Opera is even simpler: you
can install multiple versions and run them without having to do anything special.

How to use microformats to enhance a set of contact details.

1. Add a surrounding div. Open using-microformats.
html, and place a div with a class value of vcard
around the contact details content, as shown (truncated)
following:
<h1>Contact details</h1>
<div class="vcard">
<h2>Mail</h2>
[...]
Mobile/cell: +1 (0)7000 555555</p>
</div>

2. Structure the address. Marking up the address is fairly
simple, and few changes are required to the general
structure of the code. However, because each individual set of information requires
its own container, and the best way of creating a container for the address is to
place it within a block element of its own, the company name and the address each
need their own paragraphs, rather than a line break separating the two. The organization’s
paragraph is then given a class value of fn org. Here, fn stands for “full
name” and org defines that the name belongs to an organization, rather than a
person.
The address paragraph’s class value is adr, and each line of the address is placed
within a span element. The various class values assigned to the spans denote
which element of the address the content refers to, and those are all straightforward
to understand. However, address books—and therefore microformats—
enable you to distinguish between different types of data. For example, you can
have a work address or a home address. This can be defined by adding the relevant
word (e.g., work) and wrapping it in a span with a class value of type, thereby
defining the type for the parent property. In this case, the address is being defined
as a work address.
For cases when you don’t want this information shown on the web page (which will
likely be most of the time—after all, adding a lowercase “work” in front of the
street name hardly looks great), add a second class value, hidden. Later, CSS will
be used to make content with a hidden value invisible.
<h2>Mail</h2>
<p class="fn org">Company name</p>
<p class="adr">
<span class="type hidden">work</span>
<span class="street-address">00, Street Name</span><br />

<span class="locality">Town or City</span><br />
<span class="region">County or Region</span><br />
<span class="postal-code">Postal/ZIP code</span>
<span class="country-name">Country name</span>
</p>

3. Structure the telephone/fax details. Each definition for a telephone number
requires its own container, and so the single paragraph must be split into three, as
shown in the following code block. Each paragraph’s class value should be tel. As
with the address, a span with a class value of type hidden is used to define the
type for each parent property. For tel, there are various options available, including
work, home, fax, cell, pager, and video. Should duplicate types be required
(such as for a work fax), two type spans are added. As for the contact number
itself, that’s placed in a span element with a class value of value.
<h2>Telephone/fax</h2>
<p class="tel">
Tel: <span class="type hidden">work</span>
<span class="value">+1 (0)0000 555555</span></p>
<p class="tel">
Fax: <span class="type hidden">fax</span>
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
<p class="tel">
Mobile/cell: <span class="type hidden">cell</span>
<span class="value">+1 (0)7000 555555</span></p>
4. Style headings and paragraphs. The style sheet,

using-microformats.css, already has some
defined styles, which do the usual removal of
margins and padding and setting of the default
font size. The body rule also adds some padding
to the page content so that it doesn’t hug the
browser window edges. To this, add the following
three rules, which style the headings and paragraphs.
Both headings are rendered in uppercase
Arial, helping them to stand out, aiding visual
navigation of the contact details.
h1 {
font: bold 1.5em/1.2em Arial, Helvetica
å sans-serif;
margin-bottom: 1.2em;
text-transform: uppercase;
}

h2 {
font: bold 1.25em/1.44em Arial, Helvetica sans-serif;
text-transform: uppercase;
}
p {
font-size: 1.2em;
line-height: 1.5em;
margin-bottom: 1.5em;
}

5. Hide hidden elements. As noted in steps 2 and 3, some information requires a type
to be defined for it, but as you can see in the previous image, this is displayed
onscreen like any other content. This is why the hidden value was also applied to
the relevant span elements. By adding the following rule, these spans are made
invisible.
.hidden {
display: none;
}

6. Deal with margin issues. Because the telephone
details are each in an individual paragraph, they
each have a bottom margin, and this makes the layout
look awful. The same problem also affects the
company name paragraph. However, because each
paragraph has its own class attribute value, it’s
easy to remove the bottom margins from the relevant
paragraphs using the following rule:
.tel, .fn {
margin-bottom: 0;
}

7. Embolden the company name. Balance-wise, the
company name could do with standing out more. This is within a paragraph that
has a class value of org, so making the contents bold is child’s play—just add the
following rule.
.org {
font-weight: bold;
}

8. Finally, style the vcard div via the following rule. This sets a background color,
width, border, and padding, but perhaps the most important property here is
margin-bottom. This is required because the margins from paragraphs with a tel
class were removed in step 6. When you add a bottom margin to the vcard div, the
typical spacing you’d expect after a paragraphs returns.
.vcard {
width: 200px;
background: #eeeeee;
border: 1px solid #cccccc;

padding: 8px;
margin-bottom: 1.5em;
}
Note that further simplification of some elements of the code shown in the exercise is
possible. For example, where you have the Fax line, the type span could be directly
wrapped around the relevant label, and the hidden class removed.
Where before you had the following:
<p class="tel">
Fax: <span class="type hidden">fax</span>
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
you’ll now have this:
<p class="tel">
<span class="type">Fax</span>:
<span class="type hidden">work</span>
<span class="value">+1 (0)0000 555556</span></p>
The same is also true for the Mobile/cell line.
Note also that this is a relatively new technology, so it’s not without its drawbacks. As mentioned
earlier, some details are not carried through to some address books. Also, the need
to hide extra data is problematic, since under some circumstances (such as in text readers),
it will be displayed, which could lead to confusion. However

Anatomy of a layout: Tables vs. CSS

To use a fine art analogy, working with tables is like painting by numbers: you create a
skeleton layout and then fill in the gaps with the content of choice. And, like painting by
numbers, a lot of work is required to change the layout after it’s completed. Working with
CSS is more akin to sculpting with clay: you begin with something simple and then gradually
fashion your layout. Making changes, tweaks, and even additions at a later date is simpler,
and the whole process feels more organic.
Long-time web designers may feel intimidated by CSS because they don’t initially have the
skeleton layout of table borders to work with. In some ways, CSS sits at the extremes of
web technologies, being both very graphic and design-like (in its flexibility), but also quite
technical (in how it’s created). Tables tend to sit in the middle of these two extremes.
However, once you get the hang of CSS workflow, it soon becomes second nature. Now,
we’ll look at how to create a web page structure, and we’ll then recap the CSS box model.

Scope and headers of tables

Although table header cells provide a means of differentiating headers and other data, a
direct means of associating one with the other can be added via the use of various attributes.
For simple data tables, the scope attribute, added to table headers, provides an indication
of which data a heading refers to. For example, in the previous code block, the
table is oriented in columns—the headers are above their associated data. Therefore,
adding a scope attribute to the header cells, with a value of col, clearly defines this relationship—
and this is something that comes in handy for screen readers.
<th scope="col">Country</th><th scope="col">Capital city</th>
<td>France</td><td>Paris</td>
If the alignment of the table were changed, with the headers at the left, the row value
would instead be used.
<th scope="row">Country</th><td>France</td>
<th scope="row">Capital city</th><td>Paris</td>
Note that if a table header contains colspan or rowspan attributes—for example, if a
header, such as food, spanned two columns (thereby having the attribute/value pair
colspan="2") and had underneath two further headings, such as fruit and vegetables—
you could set scope="colgroup" in the table header start tag. The equivalent is true for
headers with a rowspan attribute, whereupon the scope value changes to rowgroup. In
such cases, you also need to use the colgroup/rowgroup elements.
These are positioned between the caption and thead of the table (see the following code,
and see the following section for an overview of the various structural elements of tables
combined).
<colgroup span="2">
<colgroup span="2">
<thead>
<tr>
<th scope="colgroup" colspan="2">Fruit</th>
<th scope="colgroup" colspan="2">Vegetable</th>
</tr>
<tr>
<th scope="col">Citrus</th>
<th scope="col">Berry</th>
<th scope="col">Root</th>
<th scope="col">Legume</th>
</tr>
</thead>
For more complex tables that have intricate structures, using many colspans or rowspans,
where it wouldn’t be immediately obvious where the relationship lies between a data
cell and a header, you can use id values and the headers element. Each table header cell
should be assigned a unique id value. Each table data cell that refers to one or more headers
requires a headers element. The value of the headers element is the id or ids that the
cell data refers to. Even for simpler data tables, this method can work well—see the following
code block for how our fruit and vegetables table snippet works with id and
headers.
<thead>
<tr>
<th id="fruit" colspan="2">Fruit</th>
<th id="vegetables" colspan="2">Vegetable</th>
</tr>
<tr>
<th id="citrus">Citrus</th>
<th id="berry" >Berry</th>
<th id="root" >Root</th>
<th id="legume" >Legume</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="fruit citrus">Lemon</td>
<td headers="fruit berry">Blueberry</td>
<td headers="vegetable root">Potato</td>
<td headers="vegetable legume">Pea</td>
</tr>
</tbody>
Note that the code blocks in this section are here to highlight the attributes and elements
being discussed—they should not be seen as examples of complete tables.

Vertical alignment of table cell content in Css

If you set your table’s width to a small value, or if you have a
lot of content in one cell and relatively little in an adjacent
one, something else becomes apparent: web browsers vertically
align content in the middle of cells. (Generally, horizontal
alignment is, as with other text, to the left.) See the image
on the right for an example.
Historically, designers have used the valign attribute to
override this vertical-centering behavior—the attribute can
be added to a row or cell start tag, and set to top:
valign="top". Other values are middle (the default) and
bottom, the results of which are shown in the adjacent
screenshot.
The problem with valign is that it’s presentational markup and shouldn’t really be used; in
fact, because it’s a deprecated attribute—which means it can’t be used if you’re creating
valid XHTML Strict documents—you should instead work with the CSS alternative, the
vertical-align property, which provides practically identical results.
As an example of vertical-align in use, say you wanted all cells within a table that had a
class value of priceList to be vertically aligned to the top; you could add the following
rule to your CSS:
table.priceList td {
vertical-align: top;
}
This results in the same effect as valign="top", as discussed earlier. Likewise, you can set
the vertical-align property to middle, bottom, and various other values, as outlined
in Appendix D, “CSS Reference.”That’s pretty much where many web designers leave tables; however, there are other elements
and attributes that should be used when creating tables, which will be covered in
the following sections.
 

The dos and don’ts of web navigation

Do

• Use appropriate types of navigation.
• Provide alternate means of accessing information.
• Ensure links stand out.
• Take advantage of link states to provide feedback for users.
• Get the link state order right (link, visited, hover, active).
• Use styled lists for navigation.
• Use CSS and as few images as possible (preferably one) for rollovers.

Don’t

• Add search boxes just for the sake of it.
• Use deprecated body attributes.
• Style navigation links like normal body copy.
• Use image maps unless absolutely necessary.
• Open new windows from links or use pop-ups.
• Use clunky JavaScript for rollovers.

Top-of-page links

Internal page links are sometimes used to create a top-of-page/back-to-top link. This is
particularly handy for websites that have lengthy pages—when a user has scrolled to the
bottom of the page, they can click the link to return to the top of the document, which
usually houses the navigation. The problem here is that the most common internal linking
method—targeting a link at #top—fails in many browsers, including Firefox and Opera.
<a href="#top">Back to top</a>
You’ve likely seen the previous sort of link countless times, but unless you’re using Internet
Explorer or Safari, it’s as dead as a dodo. There are various workarounds, though, one of
which is to include a fragment identifier at the top of the document. At the foot of the
web page is the Back to top link shown previously, and the fragment identifier is placed
at the top of the web page:
<a id="top" name="top"></a>
This technique isn’t without its problems, though. Some browsers ignore empty elements
such as this (some web designers therefore populate the element with a single space); it’s
tricky to get the element right at the top of the page and not to interfere with subsequent
content; and, if you’re working with XHTML Strict, it’s not valid to have an inline element
on its own, outside of a block element, such as p or div.
Two potential solutions are on offer. The simplest is to link the top-of-page link to your
containing div—the one within which your web page’s content is housed. For sites I
create—as you’ll see in Chapter 7—I typically house all content within a div that has an id
value of wrapper. This enables me to easily control the width of the layout, among other
things. In the context of this section of this chapter, the wrapper div also provides something
for a top-of-page link to jump to. Clicking the link in the following code block would
enable a user to jump to the top of the wrapper div, at (or very near to) the top of the
web page.
<a href="#wrapper">Top of page</a>
Note that since standalone inline elements aren’t valid in XHTML Strict, the preceding
would either be housed within a paragraph or a footer div, depending on the site.
Another solution is to nest a fragment identifier within a div and then style the div to sit
at the top left of the web page. The HTML for this is the following:
<div id="topOfPageAnchor">
<a id="top" name="top"> </a>
</div>

In CSS, you would then add the following:
div#topOfPageAnchor {
position: absolute;
top: 0;
left: 0;
height: 0;
}
Setting the div’s height to 0 means it takes up no space and is therefore not displayed; setting
its positioning to absolute means it’s outside the normal flow of the document, so it
doesn’t affect subsequent page content. You can test this by setting the background color
of a following element to something vivid—it should sit tight to the edge of the browser
window edges.