Saving on icons 2 June 2005

<style type="text/css">
    ul
    {
        padding: 0;
        margin: 0;
    }
    #services li
    {
        padding: 0;
        margin: 0 2em 0 0;
        float: left;
        list-style-type: none;
        position: relative;
    }
    #services a
    {
        padding: 0 0 0 18px;
        display: block;
        position: relative;
        text-decoration: underline;
        z-index: 2;
    }
    /* this element is needed to prevent IE background image reloading */
    #services i
    {
        position: absolute;
        z-index: 1;
        left: 0;
        top: -8px;
        width: 16px; height: 16px;
        margin-top: 0.6em;
        background: url('services.gif') no-repeat;
    }
    #narod i { background-position: -16px 0; }
    #maps i { background-position: -48px 0; }
    #money i { background-position: -96px 0; }
</style>
<ul id="services"> 
    <li id="maps"><i></i>http://maps.yandex.ru/">Maps</a></li>
    <li id="money"><i></i>http://money.yandex.ru/">Money</a></li>
    <li id="narod"><i></i>http://narod.yandex.ru/">Two barrels</a></li>
</ul>