The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS list style images

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #26791

    I have an image on a unordered list instead of bullets. The text is below the image, I want to either raise it up or lower the image so that they are better aligned. How do I do that or is it possible?


    Hey, can you give us your current code? or a link where you have this set up so we can help you?


    well I put the image on the list item just fine. I thought that maybe padding could fix it, but any padding changes the height of both the image and the text. I want to move the new image down to match the text, but keep it part of the list. So I just used

    list-style-image in the css with a normal ul list


    Chris Coyier

    list-style-image kinda sucks. Just use a background image on the li items themselves. Then you can adjust with background position all you need.


    that is better. Thanks chris. I knew of background:url(image) top left; from watching your screen casts, but I just now realized that I could do

    background:url(image) 5px left; and that moved the image right where I want it to be.


    I ran into a support issue with firefox. I was using shorthand like this

    background:url(../images/new1.png) no-repeat 10px left;

    worked ok in I.E 8 but I noticed it didn’t work with firefox, so I ran the code through the css validator and it said there was to many values. So I split it up to

    background:url(../images/new1.png) no-repeat;
    background-position: 10px left;

    also tried

    background-position: 10px 0;

    no luck in firefox or I.E 8. Any thoughts?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.