Grow your CSS skills. Land your dream job.

image list style alignment

  • # May 19, 2010 at 5:46 am

    Hi

    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.

    http://www.springtidebathrooms.co.uk/test/index.htm

    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??

    Cheers,
    Caroline

    # 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.

*May or may not contain any actual "CSS" or "Tricks".