INTRODUCTION

There are an increasing number of CSS resources around, yet you only have to look at
a CSS mailing list to see the same questions popping up time and again. How do I
center a design?”What is the best rounded-corner box technique?” How do I create a
three-column layout? "If you follow the CSS design community, it is usually a case of
remembering which website a particular article or technique is featured on. However, if
you are relatively new to CSS, or don’t have the time to read all the blogs, this
information can be hard to track down.
Even people who are skilled at CSS run into problems with some of the more obscure
aspects of CSS such as the positioning model or specificity. This is because most CSS
developers are self-taught, picking up tricks from articles and other people’s code
without fully understanding the spec. And is it any wonder, as the CSS specification is
complex and often contradictory, written for browser manufacturers rather than web
developers?
Then there are the browsers to contend with. Browser bugs and inconsistencies are one
of the biggest problems for the modern CSS developer. Unfortunately, many of these
bugs are poorly documented and their fixes verge on the side of folk law. You know that
you have to do something a certain way or it will break in one browser or another. You
just can't remember which browser or how it breaks.
So the idea for a book formed. A book that brings together the most useful CSS
techniques in one place, that focuses on real-world browser issues and that helps plug
common gaps in people's CSS knowledge. A book that will help you jump the learning
curve and have you coding like a CSS expert in no time flat.


( +  
%  &' )* , "#$ !

        

DEF2G  HIJ39K@LM5 589:;3<=>?#@;  C=5 7 -./012
 !AB  34

@XZST#U9  MVW9;   XY58OH<P
 !AB  OQ  R=  5 58 N@
[ e [
XYb
 cd&fg  ( f9  h>  ijkl  mn
 o
 p  a@`  \#
 ]
  
.  ^
 _
[ [ [
c 
q
 rst  uZvw9x  yz{#9|gj}
 ~  
 S
 =€ 2 

 =
;!AB  #…O!A †‡
 LBˆ…‰`Šp
    ‹ ŒnƒV9„q   9‚
[
9‘9
 :  ’ y“”&|  gz{•ƒ  V
–—
.
 ˜™š›cSŽq‹#: BŠ  

 v 
 2 ¢ £¤cSŽq‹#Ÿ3Z
   
 ¡ ‹9>#9 #9Sœ :&ž;!AB
 `¨S
c@…¦§Bf9  Žq©H:  ¬­9GH…#…O!A #¥
 #ª«@   –—
(
cS´µ  A! ¶
  ¦§B    ]9#‹®¯°=±#9² … #…O!A c - #
2 … #…O!A ³
 
}
 ~
 c &  ½¾2¦ 
 
¸¹o
 §B™¿m#«9#o>#9S·  º! >»  ¼
  [
Ã.À#.  BÁ=# …O!A   X
 ;!AB  `ÂÃ.¨#9ÄÅ
. ÆÇ #¥  GÈÉ]  }
 @ † C
cvË  #ÍΆ‡#9…#…O!A †‡cà ÅL@x
 #‘Ì  yL3&Ê  =µ  ‘9#9
 [
 Ó )ÒÔ
† ‡^_¨  Ñ)Ò 
  µ:ÏÐ   † ‡· 
 ÕÖc     9·
×ØÙ]¶  Õ
~·Õ]c ÝP}
 Þ
 2 
 ß
 =Ÿ  
 MV¹ Ú  Î… #…O!A
 µ:ÛÜÍ
µ:à3áâ ! ã  nå
ä  =æ
 çèÚé
 ê
 9:ë^
 _¨o
 Jì
 
cé
It is in our nature to try to organize the world around us. Scientists create lists of
animals, plants, and chemical elements. Magazines create lists of the top 10 movies,

the latest fashion trends, or the worst-dressed celebrities. People write shopping lists,

to-do lists, and lists to Santa. We just love making lists.

Lists provide us with a way of grouping related elements and, by doing so, we give them
meaning and structure. Most web pages contain some form of list, be it a list of the
latest news stories, a list of links to your favorite web pages, or a list of links to other
parts of your site. Identifying these items as lists and marking them up as such can help
add structure to your HTML documents, providing useful hooks with which to apply your
styles.
In this chapter you will learn about

Styling lists with CSS

Using background images as bullets

Creating vertical and horizontal nav bars

Using sliding doors tabbed navigation

Creating CSS image maps

Creating remote rollovers

Using definition lists

Basic list styling

Basic list styling is very simple. Say you start with this simple to-do list:
<ul>
<li>Read emails</li>
<li>Write book</li>
<li>Go shopping</li>
<li>Cook dinner</li>
<li>Watch Scrubs</li>
</ul>
    


 
  


2_ ñêò#99‰9#Kq¶   ó>  ôgcSîÅïð@€ 2 Y#Cb`   J
  í  ]
 [  ( +
ã
ùµ#úcSŽHõöûü   
  !ýEAþ
!
 

EFE ! cSŽHø')* ÷õö

[ 
Ž#‘A !  #úã
Ç cS-Hõö¶    #! =9  
 2“  … #‘
 [ [  [ [
! 
#9·w9
c †Az  µ  #úã 
Höc -HL9P2  MV 
 g
[  õö
#92  9>G:›H‹ 9Y  9jµ‘9  b` -  Há
[ [ [ [ [ 

. ö
 2  ‘EA ! ‹…
]
 ÅS!#ö2n  ¨ n| gf9 
 "9 Ëc -.9g
[ [ e [ [
Gq2fJ  ¶   êg##µ‘92fg ( $ö†% ³
 ö2|  ‹&
 gf9  ~
[  [ [
2'f9  ~ -.9g2(f9  ~` 
.  ]‹ )*G  Hõö2  9Öcö­9
å²B@ 
c:+=  … ,#-.v` -  Há
/ 01g1gccc -.ó

723X 
 
 =·  

P9H2
 4ö5#6  

 (

:L7')8 Ô# 9@A9: !  2;<

 =
 > )?

H
 …#
Ñ    @ š#9A

= )? 

L7Ñ>    @B… #9B²CD



H
 EF



H
 …#99L9#

L74ö-GH
  [

H
 ö ¡
[  [
 bc Jg‹ g
7SŽ:…Iö ¡ ‹ g  
Hö ¡

<ul>
<li>Read emails</li>
<li>Write book</li>
<li>Go shopping</li>
<li>Cook dinner</li>
<li>Watch Scrubs</li>
</ul>