Solved

bullet spacing

Posted on 2011-09-19
7
373 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change how page is organized 3 36
ASP get fieds value 2 20
links not working 2 25
window close link 7 32
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

735 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