list style images

[cybershot]

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?

[AshtonSanders]

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

[cybershot]

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

[img]http://www.creativeeventsdesign.com/img.jpg[/img]

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

[cybershot]

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.

[cybershot]

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?

[Author]

Posts