need specific bullet image in a DL

i'm using a DL in my page that follows in order to give a heading and description for all the services this company offers: http://www.anthonymenshairsalon.com/new_index.html

however i also want to insert a tiny scissor image to the left of each bullet point heading in the DL, just like the attached mockup. how do i go about that???

thanks in advance!


dl.haircare {
font-style: italic;
color: #10007B;
list-style-image: url(pics/scissor.gif);
line-height: 20px;
font-size: 16px;
}
dt {
font-weight: bold;
padding-top: 20px;
}
dd {
}

Hi,

Look over this and see if it helps you achieve the customized DL bullets.

http://webdesign.about.com/od/styleproperties/p/blspliststyleim.htm

Thanks

Kristin

thanks but that doesnt seem to really cover DLs. can someone please advise what to do with this specific situation? thanks!

however i also want to insert a tiny scissor image to the left of each bullet point heading in the DL, just like the attached mockup. how do i go about that???I'm assuming the code you've shown doesn't work or you wouldn't be here. My guess is that the bullet is not showing up because you forgot to set the dt elements display type via display: list-item.

If you need finer control over your bullets' positioning, you may want to consider using a combination of background images and left padding. You still need to specify display: list-item if you want the bullets to appear on a copy and paste though.

thanks. but in the end i was able to get it working without list-items


dt {
font-weight: bold;
padding-top: 20px;
}
dt img {
margin-bottom: -10px;
margin-right: 3px;
}
dd {
padding-left: 30px;
}