1,105,538 Community Members

wrapping bulletted text

Member Avatar
lailalaila
Newbie Poster
5 posts since Jul 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi everyone,

How do you make the text in bullets wrap so that the words on the following line dont begin under the bullet, but rather under the first word of the bulletted text? Should I do this in my html text doc (in the <li></li> tags) or in a css doc? I've never been able to figure this out. Please help. Thanks!

laila

Member Avatar
autocrat
Posting Pro in Training
427 posts since Feb 2005
Reputation Points: 52 [?]
Q&As Helped to Solve: 12 [?]
Skill Endorsements: 0 [?]
 
0
 

Hmm - dam good question.

I tought that they would automatically be "seperate"...

If you can, think of it as two seperate table cells... I always thought the bullet was in the left one, the text in the right...

Where as you are saying you see the bullet, you have a space, then the text... which wraps round and causes the text to continue on the line below, satarting from the bullet ?


Well - I cannot say I've ever encountered this... but try...

UL
{list-style-position: inside;}

The only thing I can think of is that you hae somehow applied different formatting else where and it is overiding.

If that doesn't help, come back and paste some of the code (or link to the page).

Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
0
 

It should automatically happen that way.

BUT

If you apply any overall or left margin, border, or padding style to the text in the UL list, or to a containing item, it will cause the automatic indenting to fall apart in most browsers.

Use of

list-style-position: inside;

forces the bullets to be in the paragraph, instead of separate. Use this instead:

list-style-position: outside;
Member Avatar
lailalaila
Newbie Poster
5 posts since Jul 2007
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

thanks to you both...still working at it, but i'm not quite sure what i'm missing. :)

Member Avatar
MidiMagic
Nearly a Senior Poster
3,404 posts since Jan 2007
Reputation Points: 556 [?]
Q&As Helped to Solve: 215 [?]
Skill Endorsements: 2 [?]
 
0
 

You have to remove all margin, border, and padding style to get the bulleted list to display properly. This includes containing objects with styles.

Or put the following style in:

li {padding: 0;
    border: none;
    margin: 0;
    list-style-position: inside;}
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article