Backward compatibility with fragment identifiers

In older websites, you may see a slightly different system for accessing content within a
web page, and this largely involves obsolete browsers such as Netscape 4 not understanding
how to deal with links that solely use the id attribute. Instead, you’ll see a fragment
identifier, which is an anchor tag with a name attribute, but no href attribute. For instance,
a fragment identifier for the first answer is as follows:
<p><a id="answer1" name="answer1">Answer 1!</a></p>

The reason for the doubling up, here—using both the name and id attributes, is because
the former is on borrowed time in web specifications, and it should therefore only be used
for backward compatibility.

Displaying blocks of code online

1. Create the list. Code blocks require terminology and descriptions, meaning that a
definition list can be used to mark them up. For this example, the code block from
the preceding “List style shorthand” section will be used. Within the wrapper div,
create a definition list and give it a class value of codeList. For the term, add a
description of the code, and for the definition, add an ordered list, with each line
of code within its own list item. Each line of code should also be nested within a
code element.
<dl class="codeList">
<dt>Writing out list styles in full</dt>
<dd>
<ol>
<li><code>ul {</code></li>
<li><code>list-style-type: square;</code></li>
<li><code>list-style-position: inside;</code></li>
<li><code>list-style-image: url(bullet.gif);</code></li>
<li><code>}</code></li>
</ol>
</dd>
</dl>
2. Amend the body and #wrapper CSS rules, adding some padding to the former (so
the content doesn’t hug the browser window edges during testing) and a shorthand
font definition to the latter (in place of existing content).
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
#wrapper {
font: 1.2em/1.5em 'Lucida Grande', 'Lucida Sans Unicode', Lucida,
å Arial, Helvetica, sans-serif;
}

3. Style the list. Add the following rule, which adds a solid border around the definition
list that has a codeList class value:
.codeList {
border: 1px solid #aaaaaa;
}
4. Style the definition term element. Add the following rule, which styles the dt element.
The rule colors the background of dt elements within any element with a
class value of codeList, and also adds some padding so the content of the dt
elements doesn’t hug their borders. The font-weight value of bold ensures the
content stands out, while the border-bottom value will be used as a device
throughout the other rules, separating components of the design with a fairly thin
white line.
.codeList dt {
background: #dddddd;
padding: 7px;
font-weight: bold;
border-bottom: 2px solid #ffffff;
}
5. Style the list items within the ordered list by adding the following rule. The
margin-left value places the bullets within the definition list, rather than outside
of it.
.codeList li {
background: #ffffff;
margin-left: 2.5em;
}

**Note : Note that in Internet Explorer, the bullets typically display further to the left than in
other browsers. This behavior can be dealt with by overriding the margin-left value
of .codeList li in an IE-specific style sheet attached using a conditional comment—
see Chapter 9 for more on this technique.

.codeList code {
background: #eaeaea;
display: block;
border-bottom: 2px solid #ffffff;
border-right: 2px solid #ffffff;
font : 1.2em "Courier New", Courier, monospace;
padding: 2px 10px;
}

  Finally, style the code elements. The background value is slightly lighter than that
used for the dt element, ensuring that each element is distinct. By setting display
to block, the code elements stretch to fill their container (meaning that the background
color also does this). The borders ensure that each line of code is visibly
distinct, and the border-right setting essentially provides a border all the way
around the code lines, seeing as the border-bottom setting in .codeList dt
defines one at the top of the first line of code. The font is set to a monospace font,
and the padding values place some space around the code, making it easier to
read.

Creating better-looking lists

1. Create the list. Within the HTML document’s wrapper div, add the following code:
<ul>
<li>List - 1.1
<ul>
<li>List - 2.1</li>
<li>List - 2.2
<ul>
<li>List - 3.1</li>
<li>List - 3.2</li>
<li>List - 3.3</li>
</ul>
</li>
<li>List - 2.3</li>
</ul>
</li>
</ul>
2. Amend the body rule. Add some padding to the body element so that page content
doesn’t hug the browser window edges during testing:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 20px;
}
3. Style the list elements. This kind of heavily styled list typically requires you to
define specific property values at one level and then override them if they’re not
required for subsequent levels. This is done by adding the three rules in the following
code block. For this example, the top level of the list (styled via ul) has a
star background image that doesn’t repeat (the 1px vertical value is used to nudge
the image into place so it looks better positioned), and the list-style-type value
of none removes the default bullet points of all lists on the page.
For the second level of lists (the first level of nesting), styled via ul ul, a horizontally
tiling background image is added, giving the impression that the top-level list
is casting a soft shadow. The border-left setting creates a soft boundary to the
nested list’s left, thereby enclosing the content. The padding value ensures that
there’s space around nested lists.
For the third level of lists (the second level of nesting—that is, a nested list within
a nested list), styled via ul ul ul, no specific styles are required, but to deal with
inherited styles from ul ul, background is set to none and border-left is set to 0.
If this weren’t done, third-level lists would also have the shadow background and
dotted left-hand border.
ul {
list-style-type: none;
background: url(better-list-star.gif) 0 1px no-repeat;
}
ul ul {
background: url(better-list-shadow.gif) repeat-x;
border-left: 1px dotted #aaaaaa;

padding: 10px;
}
ul ul ul {
background: none;
border-left: 0;
}

4. Style the list item elements. For the top-level list items, the li rule styles them in
uppercase, adds some padding (to ensure the items don’t sit over the background
image applied in ul), and makes the text bold and gray. For the nested list items,
the li li rule overrides the text-transform property, returning the text to sentence
case, and adds a square gray bullet as a background image. The font-weight
value is an override, and the color setting is darker than for the parent list’s list
items so that the non-bold text of the nested list items stand out. Finally, for the
third-level list items, styled using the selector li li li, a background override provides
a unique bullet point image (a hollow square).
li {
text-transform: uppercase;
padding-left: 20px;
font-weight: bold;
color: #666666;
}
li li {
text-transform: none;
background: url(better-list-square.gif) 0 2px no-repeat;
font-weight: normal;
color: #333333;
}
li li li {
background: url(better-list-hollow-square.gif) 0 2px no-repeat;
}

Inline lists for navigation

Although most people think of lists as being vertically aligned, you can also display list
items inline. This is particularly useful when creating navigation bars, as you’ll see in
Chapter 5. To set a list to display inline, you simply add display: inline; to the li
selector. Adding list-style-type: none; to the ul selector ensures that the list sits
snug to the left of its container (omitting this tends to indent the list items). Adding a
margin-right value to li also ensures that the list items don’t sit right next to each other.
Here’s an example:
ul {
list-style-type: none;
}
li {
display: inline;
margin-right: 10px;
}

List margins and padding

Browsers don’t seem to be able to agree on how much padding and margin to place
around lists by default, and also how margin and padding settings affect lists in general.
This can be frustrating when developing websites that rely on lists and pixel-perfect element
placement. By creating a list and using CSS to apply a background color to the list
and a different color to list items, and then removing the page’s padding and margins, you
can observe how each browser creates lists and indents the bullet points and content.
In Gecko browsers (e.g., Mozilla Firefox), Opera, and Safari, the list background color is
displayed behind the bullet points, which suggests that those browsers place bullet points
within the list’s left-hand padding (because backgrounds extend into an element’s
padding). Internet Explorer shows no background color there, suggesting it places bullet
points within the list’s left-hand margin.
This is confirmed if you set the margin property to 0 for a ul selector in CSS. The list is
unaffected in all browsers but Internet Explorer, in which the bullets abut the left edge of
the web browser window. Conversely, setting padding to 0 makes the same thing happen
in Gecko browsers, Safari, and Opera.
To get all browsers on a level playing field, you must remove margins and padding, which,
as mentioned previously in this book, is done in CSS by way of the universal selector:
* {
margin: 0;
padding: 0;
}
With this in place, all browsers render lists in the same way, and you can set specific values
as appropriate. For example, bring back the bullet points (which may be at least partially
hidden if margins and padding are both zeroed) by setting either the margin-left or
padding-left value to 1.5em (i.e., set margin: 0 0 0 1.5em or padding: 0 0 0 1.5em).
The difference is that if you set padding-left, any background applied to the list willappear behind the bullet points, but if you set margin-left, it won’t. Note that 1.5em is a
big enough value to enable the bullet points to display (in fact, lower values are usually
sufficient, too—although take care not to set values too low, or the bullets will be
clipped); setting a higher value places more space to the left of the bullet points.

List style shorthand

As elsewhere in CSS, there is a shorthand property for list styles, and this is the aptly
named list-style property. An example of its use is shown in the following piece of CSS:
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: url(bullet.gif);
}
which can be rewritten as follows:
ul {
list-style: square inside url(bullet.gif);
}

list-style-type property

The list-style-type property is used to amend the bullets in an unordered or ordered
list, enabling you to change the default bullets to something else (other than a custom
image). In an unordered list, this defaults to disc (a black bullet), but other values are
available, such as circle (a hollow disc bullet), square (a square bullet), and none, which
results in no bullet points. For ordered lists, this defaults to decimal (resulting in a numbered
list), but a number of other values are available, including lower-roman (i, ii, iii, etc.)
and upper-alpha (A, B, C, etc.) A full list of supported values is in Appendix D (CSS
Reference).
Generally speaking, the values noted are the best supported, along with the upper and
lower versions of roman and alpha for ordered lists. If a browser doesn’t understand the
numbering system used for an ordered list, it usually defaults to decimal. The W3C recommends
using decimal whenever possible, because it makes web pages easier to navigate.
I agree—things like alpha and roman are too esoteric for general use, plus there’s
nothing in the CSS specifications to tell a browser what to do in an alphabetic system after
z is reached (although most browsers are consistent in going on to aa, ab, ac, etc.).

list-style-position property

This property has two values: inside and outside. The latter is how list items are usually
displayed: the bullet is placed in the list margin, and the left margin of the text is always
indented. However, if you use inside, bullets are placed where the first text character
would usually go, meaning that the text will wrap underneath the bullet.

Dealing with font-size inheritance

Most of the font-size definitions in this chapter (and indeed, in this book) use relative
units. The problem with using ems, however, is that they compound. For example, if you
have a typical nested list like the one just shown, and you define the following CSS, the
first level of the list will have text sized at 1.5em; but the second-level list is a list within a
list, so its font-size value will be compounded (1.5 5 1.5 = 2.25em). 

html {
font-size: 100%;
}
body {
font-size: 62.5%;
font-family: Verdana, Arial,
å Helvetica, sans-serif;
}
li {
font-size: 1.5em;
}
The simple workaround for this is to use a contextual selector—li li—to set an explicit
font-size value for list items within list items, as shown in the following rule.
li li {
font-size: 1em;
}
With this, all nested lists take on the same font-size value as the parent list, which in this
case is 1.5em.

Working with lists in Css

Unordered lists

The unordered list, commonly referred to as a bullet point list, is the most frequently seen
type of list online. The list is composed of an unordered list element (<ul></ul>) and any
number of list items within, each of which looks like this (prior to content being added):
<li></li>. An example of an unordered list follows, and the resulting browser display is
shown to the right. As you can see, browsers typically render a single-level unordered list
with solid black bullet points.
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item 'n'</li>
</ul>

**Note : Unlike HTML, XHTML lists require end tags on all list elements. In
HTML, the </li> end tag was optional.

Ordered lists

On occasion, list items must be stated in order, whereupon an ordered list is used. It works
in the same way as an unordered list, the only difference being the containing element,
which is <ol></ol>.
<ol>
<li>List item one</li>
<li>List item two</li>
<li>List item 'n'</li>
</ol>

Definition lists

A definition list isn’t a straightforward list of items. Instead, it’s a list of terms and explanations.
This type of list isn’t common online, but it has its uses. The list itself is enclosed in
the definition list element (<dl></dl>), and within the element are placed terms and definitions,
marked up with <dt></dt> and <dd></dd>, respectively. Generally speaking,
browsers display the definition with an indented left-hand margin, as in the following
example.

**Note :Web browsers automatically insert the item numbers when you use ordered lists. The
only way of controlling numbering directly is via the start attribute, whose value dictates
the first number of the ordered list. Note, though, that this attribute is deprecated—
use it and your web page will not validate as XHTML Strict.

Unlike HTML, XHTML lists require end tags on all list elements. In
HTML, the </li> end tag was optional.
<dl>
<dt>Cat</dt>
<dd>Four-legged, hairy animal, with an

-> inflated sense of self-importance</dd>
<dt>Dog</dt>
<dd>Four-legged, hairy animal, often with-> an inferiority complex</dd>
</dl>

Nesting lists
Lists can be nested, but designers often do so incorrectly, screwing up their layouts and
rendering web pages invalid. The most common mistake is placing the nested list outside
any list items, as shown in the following incorrect example:
<ul>
<li>List item one</li>
<ul>
<li>Nested list item one</li>
<li>Nested list item two</li>
</ul>
<li>List item two</li>
<li>List item 'n'</li>
</ul>
Nested lists must be placed inside a list item, after the relevant item that leads into the
nested list. Here’s an example:
<ul>
<li>List item one
<ul>
<li>Nested list item one</li>
<li>Nested list item two</li>
</ul>
</li>
<li>List item two</li>
<li>List item 'n'</li>
</ul>
Always ensure that the list element that contains the nested list is closed with an end tag.
Not doing so is another common mistake, and although it’s not likely to cause as many
problems as the incorrect positioning of the list, it can still affect your layout.