On Sun, 26 Aug 2007, Robert Lane wrote:
> I put a list together for a staff directory
It seems that wish to make the list unbulleted and indented just a little.
The style sheet
ul.nobullet { margin: 0; list-style: none inside}
is somewhat unsafe for the purpose. Different browsers have different
default rendering for lists. Or, rather, they might have roughly the same
rendering but achieved in different methods in terms of CSS. The browser
default style sheets might do the indent using left margin _or_ left
padding for the list _or_ for the list items. So if you wish to get any
indentation (or non-indentation) different from the default, it's best to
start by killing all indents, e.g.
ul.nobullet, ul.nobullet li { margin: 0; padding: 0; }
and then add a setting for the _desired_ indentation.
> and one of them has a much
> too long title.
>
> I decided to use a <br> to move the title to the second line but now it
> outdents it
This seems to result from your use of the value inside. It means that the
list bullet appears inside the list item box, not to the left of it, so
some space is reserved for it - even when there is no bullet.
Consequently, subsequent lines start at the left with no indentation (on
browsers on which your margin: 0 setting kills the default indentation).
So the situation is a bit confusing. It's better to create the desired
indentation directly using margin or padding, rather than nonexistent
inside bullets. This also gives you better control over the _amount_ of
indentation.
Moreover, I suspect that you will later wish to have the continuation line
of a list item indented more than the initial line. Otherwise, in the
absence of bullets, it will be difficult to see that a title relates to
the preceding name instead of being an item in the list. One way of
achieving such indentation is to use text-indent with a negative value.
Example:
ul.nobullet { margin: 0 0 0 1.5em;
padding: 0;
list-style: none; }
ul.nobullet li { margin: 0; padding: 0; }
ul.nobullet li { text-indent: -0.5em; }
This results in a 1em (1.5em - 0.5em) indentation of the items and 1.5em
indentation of their continuation lines.
--
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/
