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 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    70
    Thanks
    9
    Thanked 0 Times in 0 Posts

    How do i reduce horizontal space in "li"

    Hi there, when I apply the following to my css file:
    Code:
    li {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #000000;
    	text-decoration: none;
    }
    And the following to my html file:
    Code:
    <ul>
        <li>Test</li>
      </ul>
    It creates a gap between my left hand margin and the circle of 20px. Is there anyway to reduce this so that it is only 5px?

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    I don't think we can have a way. However, we can use the bullet as a background image and use the background-position property instead:

    http://css.maxdesign.com.au/listutorial/index.htm
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    You can in non-IE browsers with text-indent: -#px;

    list-style-position has to be outside though (default)

    You can also, of course, wrap the li's content in a span (or div or whatever) and position:relative;left:-#px;
    Last edited by itsallkizza; 11-13-2008 at 06:15 AM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    It creates a gap between my left hand margin and the circle of 20px. Is there anyway to reduce this so that it is only 5px?
    I don't think that the above CSS would create a 20px gap any where in any browser.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    19
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by rangana View Post
    I don't think we can have a way. However, we can use the bullet as a background image and use the background-position property instead:

    http://css.maxdesign.com.au/listutorial/index.htm
    I think this is the part you are looking for in the above post. Follow his link and it'll explain things.

    Code:
    margin: 0;
    padding: 0;

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by itsallkizza View Post
    You can in non-IE browsers with text-indent: -#px;
    Since when has IE not supported CSS? It has since 5.5 at the very least.

  • #7
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    IE has some text-indent issues, I think they're all better with the latest version of IE7
    Last edited by itsallkizza; 12-02-2008 at 04:02 PM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com


  •  

    Posting Permissions

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