bullet spacing

Hi Experts,

How can I change the space between a ul/li bullet image and the related text.  The list-style-position is already set to inside but there is a space of about 15px between the bullet and the text.  I set all related margin and padding to 0 and the space remains.  see attachment

How can I remove that space?
Thanks,
HNM
 sample
HelpNearMeAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
LZ1Connect With a Mentor Commented:
Can you show us a live URL or at least paste your rendered HTML/CSS?  You could just use a background image for the li image and then add padding to right of it.
0
 
Gurvinder Pal SinghCommented:
don't think there is any such property to specify space between bullet and text in a list item. You need to make it two column and then specify the margin between bullet image and the text
0
 
HelpNearMeAuthor Commented:
LZ1 awesome idea, I'll try the background image
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Gurvinder Pal SinghCommented:
@LZ1: how do you add the padding to a background image?

It has to be a another column to the left, to which you can add the right padding or left padding to the right column text
0
 
HelpNearMeAuthor Commented:
worked thanks
0
 
Gurvinder Pal SinghCommented:
please post the solution that worked
0
 
LZ1Commented:
@gurvinder: You wouldn't add padding to the background image, but rather to the <li>.  
I've done this plenty of times when wanting special bullets or icons in a list.

Something as simple as this will yield the results:
<style> 
					ul li {
						background: url(http://cdn2.iconfinder.com/data/icons/32pxmania/buttons_28.png) no-repeat scroll left center transparent;
					    height: 21px;
					    line-height: 19px;
					    padding: 5px 36px;
					}
				
				
				</style>
				<ul>
					<li> Test </li>
					<li> Test </li>
					<li> Test </li>
					<li> Test </li>
					<li> Test </li>
				</ul>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.