Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Lists lose their Number or dot when placed in a paragraph

Status
Not open for further replies.

UncleMortis

Programmer
Jan 28, 2003
120
AU
This is the css for my paragraph:
.para {width:"100%";
margin-left:auto;
margin-right:auto;
text-align:left}
If I place a list in there, I'll lose the dots or numbers, though you can still see the place where they should be. Now if I leave the same list outside of the .para, then the numbers or dots will appear again. It also does it if I use the .para in the OL, or UL tag.

I'm also having trouble where I've told the body to text-align everything center, so that the paragraphs will appear in the middle of the page. If I have a list the numbers will not line up and the list becomes very messy. Anyone got any ideas on how to keep my dots and to stop the list from doing it's own thing? The pages aren't up at the moment sorry.
 
First of all, putting a list (<ul>, <ol>) inside a paragraph (<p>) is illegal and should not be done if you're expecting normal rendering results. That said, I hope with paragraph you just meant the style you've shown and not the element itself. Also, your width is defined incorrectly, because it is wrapped within quotes and it should not be.

As for the problem, I do believe it appears only with IE and has something to do with the styles given to the list. The code you have makes little to no sense, because the list is supposed to be 100% wide and have gap on left and right side. This will never happen. I do believe if you remove the 100% width, IE will render it correctly. Failing that, you should try playing with list-style-position.
 
Ok, So basically I leave a list out on it's own? Can I place it in a Div and give the div a class telling it what to do? Or do I just leave it out and not tell it to do anything? The reason I was doing it was because the paragraphs I was making were only 65% wide, so was wanting to make the list the same width as the paragraphs so it didn't look weird. The code above was just borrowed from the paragraphs to see what happened.

Because I've told the body to align text to the center (meaning their paragraphs are centered on the screen),means that the list will also be centered and the numbers for the list not aligned to the left. I'll try and get a page up somewhere so I can show what I mean if my explaination was a bit dodgy. Thanks for the help so far.
 
Create a simple test page that exhibits your problem and post the source here. Then we will be able to help you better.

But lists should not be nested inside headings (h1-h6), paragraphs or similar, but they can be put inside other block elements such as form or div.
 
Thank you Vragabond, you've helped me trouble shoot. I had forgotten that I need to put things like lists in a Div to manipulate them. One of those things I hadn't used so had lost.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top