Solved

bullet spacing

Posted on 2011-09-19
7
370 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: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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
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.
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…
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).

773 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