Figure 7-5. The AOL.com home page uses CSS sprites

Chapter 7 - CSS Optimization

AOL.com uses CSS sprites on its home page to improve performance. AOL uses a CSS sprite for the icons in its main directory navigation bar (Autos, Finance, Food, etc.) on the left side of its home page (see Figure 7-5).

aol.com css sprite example

Figure 7-5. The AOL.com home page uses CSS sprites

Its main CSS file sets up the directory navigation bar list:

<link rel="stylesheet" type="text/css" href="http://www.aolcdn.com/_media/aolp_v23.1/main.css" />
#sm_col .dir ul li a, #sm_col .nav2 li a, #sm_col .nav3 li a {
    line-height:1.2em;
    padding:.28em 0 .28em 2.3em;
    border-bottom:1px solid #fff;
    overflow:hidden;
}
#sm_col .dir ul li a, #aiw, #sm_col .nav2 li a, #sm_col .nav3 li a {
    display:block;
    width:10.28em;
}
...
#sm_col ul.serv li a:hover, #sm_col .nav2 li a:hover, #sm_col .nav3 li a:hover,
    .eight .dir ul li a:hover {
    background-color:#fff;
}

This CSS sets the styles for the height of the directory menu, padding (with plenty of room for the background icon—2.3 em—on the left), and a white border on the bottom, and hides any overflow. AOL displays the anchor as a block to make it clickable and set the width to 10.28 em and the rollover color to white.