Joanne wrote:
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
What css do I use to get rid of it so the bullets line up with the
rest of the content?
The default left "margin" may be caused, in CSS terms, by margin-left _or_
padding-left of the ul element _or_ the li elements, or a combination
thereof. There are differences between browsers in this issue - even though
the net effect might be the same, it is achieved by different rules in the
browser's default stylesheet.
Therefore, set one of them to the desired positive value and the others to
zero. The value needs to be positive so that there is room for the bullets.
I don't think there's a way to guarantee that the bullets line up on all
browsers. If you set
ul, li { margin-left: 0; padding-left: 0; }
ul { margin-left: 1em; }
then the bullets line up with normal content on IE and Firefox, but on
Chrome, the bullets get too much to the left. I'd suggest a value of 1.2em
or 1.3em as a reasonable compomise.
Well, you could always remove the bullets completely by setting margin-left
and padding-left to zero and generate bullet characters:
ul,li { margin-left:0; padding-left: 0; }
li:before { content: "\2022 "; }
But then you would have a problem with old versions of IE that don't support
generated content: the list would appear without any bullets.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
