Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

bullet spacing

Posted on 2011-09-19
7
Medium Priority
?
382 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
  • 3
  • 2
  • 2
7 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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 2000 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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

Technology Partners: 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

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.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

772 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