SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Problems with an image replaced list

    Hi,

    I've got the following code:

    Code HTML:
    <ul class="inbox_icons">
    	<li class="delete"><a href="#">Delete</a></li>
    	<li class="outmail"><a href="#">Outmail</a></li>
    </ul>

    Code CSS:
    ul.inbox_icons{
    	list-style: none;
    }
    ul.inbox_icons li{
    	display: inline;
    	text-indent: -999em;
    }
    ul.inbox_icons li a{
    	float: left;
    	display: block;
    	width: 18px;
        height: 18px;
    }
    li.delete{background-image: url(../img/icons/ico_remove.png);}
    li.outmail {background-image: url(../img/icons/ico_outmail.png);}
    For some reason I just can't get it displaying right, I want them displayed side by side, just with the 18px by 18px icon being displayed in the text's place, but it seems it just won't work correctly, I've managed to get just about every combination but the right one; either it displays fine on different lines, or it repeats the background when it shouldn't, or it displays fine but as soon as I add the text-indent in, everything dissapears for example.

    Any help would be ace, tyvm

  2. #2
    SitePoint Addict
    Join Date
    Jun 2007
    Posts
    396
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Just a quick update, I've put it into one file so it's a little easier to work with, I've also uploaded the two images (Silk icons fwiw):



    Code HTML:
    <style type="text/css">
    ul.inbox_icons{
        list-style: none;
    }
    ul.inbox_icons li{
        display: inline;
        text-indent: -999em;
    }
    ul.inbox_icons li a{
        float: left;
        display: block;
        width: 18px;
        height: 18px;
    }
    li.delete{background-image: url(ico_remove.png);}
    li.outmail {background-image: url(ico_outmail.png);}
    </style>
     
    <ul class="inbox_icons">
        <li class="delete"><a href="#">Delete</a></li>
        <li class="outmail"><a href="#">Outmail</a></li>
    </ul>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Put the image in the anchor.
    Code:
    li.delete a{background-image: url(http://img205.imageshack.us/img205/5816/icoremoveqv7.png);}
    li.outmail a{background-image: url(http://img264.imageshack.us/img264/2881/icooutmailpe3.png);}


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •