On Tue, 13 Mar 2007, Kenny Graham wrote:
>> How can I modify the amount of space between the bullet in an
>> unordered list and the actual text?
>
> Of course, the most positioning control comes from replacing the
> bullet with a background image.
There are various ways to create bulleted lists in the visual sense, with
great flexibility, but they are mostly based on methods that turn the list
into non-bulleted and then add something that looks like a bullet. The
method using a background image is commonly used, but its drawbacks
include the loss of anything bullet-like when image display is turned off
_or_ background images are not used, as is normal in printing.
> But then the bullet doesn't resize
> with the text, which may be an accessibility issue.
A normal bullet created with <ul> by default or by using list-style
properties in CSS doesn't resize either. This is an odd feature in
browsers, but nothing in CSS specs says that they _should_ resize.
Using list-style-type: none to suppress normal bullets and
li:before { content: ...; ... } would give flexibility in using
different characters as bullets, in spacing between bullet and list item
text, and in bullet resizability. But it's not feasible on web pages,
since IE does not support generated content.
So the most flexible and robust way, though perhaps awkward and
theoretically impure, is to use list-style-type: none and bullets included
in document content and marked up as elements, i.e.
<li><span class="bullet">...</span> text</li>
For limited styling ambitions, you could dispense with the <span> markup,
using e.g. li:first-letter { padding-left: 0.5em; }
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
