using background image for li

Yes i have the same problem, i just removed css style display: inline and add display: list-item; float:left; my problem solved, hope this helps.

Thanks, Sankar B


Your problem is in setting display to inline. If you want background and width, but you also need an inline-type list, set float: left.


Take a look at the following example:

   ul#footernav li { 
        display:inline; 
        }
    ul#footernav li a{ 
        display:block; 
        width:155px;
        text-indent:-9999px;
        }
    ul#footernav li.footerlocation a{ 
        height:30px ; 
        background: url('images/image.jpg') bottom left no-repeat; 
        }
    ul#footernav li.footerlocation a:hover{ 
        height:30px ; 
        background: url(images/image.jpg) top left no-repeat; 
        }

Tags:

Css