Forum Moderators: not2easy
I just want to adjust the whitespace to the right of a list item.
.footerlist li {
padding-bottom: .3em;
list-style: outside circle;
padding-left: 0px;
font-weight: normal;
}This is just fine, except that there's too much space to the right of the bullet. padding-left can change the space to the left of the bullet, which is fine.
But how do I get the text closer to the bullet? I don't want to change things to some silly solution like using a background image unless I absolutely have to.
Can you help, or at least point me to something useful? Thanks.
To search the site just type:
site:www.webmasterworld.com Your Keywords
into Google.
I think you need to specify the margin dimensions in the style. That should allow you to control the whitespace.
Hope that helps.
how do I get the text closer to the bullet?
There is nothing you can do to the list or list-items to control the spacing between the marker box and the content. The best CSS2.1 can do for you is the list-style-position [w3.org] property, which controls whether the marker box appears inline with the content or outside of the list's content area. The spacing between the marker and the content, however, remains the same with either value.
The reason for this is (slightly) explained in this quote from the list specs [w3.org]:
The list properties ... allow style sheets to specify ... the marker position with respect to the principal box (outside it or within it before content). They do not allow authors to ... adjust its position with respect to the principal box...
heavily edited to isolate relevant content
Or from the list-style-position specs (linked above):
CSS 2.1 does not specify the precise location of the marker box.
In other words, the distance between the marker and the content is left to the browser and is not directly touchable via CSS.
But it is indirectly touchable if you're willing to fudge the list a little. You can't control the actual space, but if you can arrange to attach styles to the content of the list-item without applying them directly to the list-item, you can use a small negative margin to pull the text closer to the marker.
For instance, take this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
ul#smaller li span{
margin-left:-6px;
}
</style>
</head>
<body>
<body><div>
<h3>List With Smaller Gap via Neg Margin on Content</h3>
<ul id="smaller">
<li><span>Item</span></li>
<li><span>Item</span></li>
<li><span>Item</span></li>
<li><span>Item</span></li>
<li><span>Item</span></li>
<li><span>Item</span></li>
</ul>
<h3>List With Default Gap</h3>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</body>
</html>
The text in the first lists sits closer to the marker by virtue of the negative 6px left margin on the span. This functions in the latest versions of FF and Opera, and IE back to version 5.5 (all on Win).
Obviously, wrapping the content in spans is not ideal, if for no other reason than it's very inconvenient, but where the specs fall short of giving control, a decision must be made between the effect we want and the means by which we get it. I don't think there's any inherent semantic flaw in using spans in this way. They're a generic inline element, hardly any different than the anonymous inline boxes drawn around all non-contained content with the exception that you can reliably attach styles to them.
Otherwise, I'm afraid you're forced to fall back on...
some silly solution like using a background image
cEM
Padding appears, according to him, to invoke the box model problems. I have been using his technique on all of my play pages and they have been playing very nicely for me.
I would also suggest a purchase of his book, It is an excellent addition to anyones css library. And I believe that sometime next year he will be working on the second edition, which should include some css3 within it.
