Solved

bullet spacing

Posted on 2011-09-19
7
376 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:HelpNearMe
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36559246
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
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 36559814
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
 

Author Comment

by:HelpNearMe
ID: 36559871
LZ1 awesome idea, I'll try the background image
0
Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

 
LVL 40

Expert Comment

by:gurvinder372
ID: 36559886
@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
 

Author Closing Comment

by:HelpNearMe
ID: 36559895
worked thanks
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36559909
please post the solution that worked
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36559931
@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

Featured Post

More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question