Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [li] too much spacing list-style-type graphic and text

    I have a list that has the style "list-style-type: disc" and text between the list item tags.

    The spacing between the disc and the text is too much and i want to cut it down.

    How can i do this? I can't get this to happen.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Good morning jeanpaul1979,
    I messed around with it a bit and not much really affects the space between the bullet and the text. Hard to say how yours looks righ now but this is as close as I could get them:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	text-align: center;
    	background: #4d4d4d;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    ul {
    	margin: 50px auto 0;
    	width: 120px;
    	list-style: disc;
    	background: #999999;
    }
    li {
    	width: 120px;
    	letter-spacing: .01em;
    }
    </style>
    </head>
    <body>
    <ul>
    <li>one</li>
    <li>two</li>
    </ul>
    </body>
    </html>
    Pretty sure you could get closer by using an image for a bullet if that's not good enough.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Dec 2006
    Posts
    177
    Thanks
    7
    Thanked 0 Times in 0 Posts
    it can also be:
    Code:
    li {
     margin:0;
     padding:0;
    }

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    You can also try the background method of creating bullets. See this recent thread.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •