Treehouse: Grow your CSS skills. Land your dream job.

image list style alignment

  • # May 19, 2010 at 5:46 am


    I’m having trouble lining up the purple arrows with the list on the left hand side of this home page, as you can see from the link below.

    I’ve also tried adding a line-height to line up the arrow image and text better, and have tried altering the image itself so that there is more white space at the top – but nothing seems to work. I know I’m doing someting fundamentally wrong.

    my css style for the list is as follows:

    .liststyle1 {
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 55px;
    padding-right: 25px;
    font-size: 13px;
    color: #808080;
    text-align: left;
    list-style-image: url(images/arrow.jpg);
    list-style-position: outside;

    Any ideas??


    # May 19, 2010 at 6:54 am

    Why don’t you create another arrow image, but with a bit more "white space" above the arrow within the image.

    # May 19, 2010 at 7:21 am

    yeah I tried that – will give it another go. Thanks x

    # May 22, 2010 at 8:57 pm

    list-style-image is generally best just to be avoided. Instead use background-image and apply padding/position as needed. FAR more cross-browser compatible and easier to deal with.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.