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,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 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 nolvorite's Avatar
    Join Date
    Dec 2006
    Posts
    176
    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,300
    Thanks
    28
    Thanked 275 Times in 269 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
    •