...

View Full Version : How do i reduce horizontal space in "li"



malhyp
11-13-2008, 05:15 AM
Hi there, when I apply the following to my css file:

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:

<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?

rangana
11-13-2008, 05:42 AM
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

itsallkizza
11-13-2008, 07:13 AM
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;

abduraooft
11-13-2008, 07:48 AM
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.

anthias
11-13-2008, 09:14 PM
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.


margin: 0;
padding: 0;

Apostropartheid
11-13-2008, 09:22 PM
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.

itsallkizza
12-02-2008, 04:55 PM
IE has some text-indent issues, I think they're all better with the latest version of IE7



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum