Formatting list items with CSS, bullets in wrong place

punstress
punstress used Ask the Experts™
on
I have a simple page that I am trying to format with simple CSS. I only have <h1>, <p>, <ul>, <li> tags, and no images.

I am trying to constrain the text so it doesn't stretch all over the page. I tried using the width attribute but when I do, a strange thing happens: the bullets for the lists show up on the LAST line of the list item.

p      {
  margin-left: 60px;
      margin-bottom: 12px;
      width: 400px;
}

li      {
      padding-left: 0;
      margin-left: 40px;
      width: 400px;
  }
 
looks like this (hopefully this will show spaces):

     Finish all training and testing within 60 days of hire. All training
  • and testing is paid at minimum wage.

This also happens if I use a percentage (width 50%, e.g.). I tried commenting out the other styles and it appears width is the culprit.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2007

Commented:
whats your list HTML like? does it have <p>'s inside the <li> ?

Author

Commented:
The li's are inside p's.

Author

Commented:
(Or, to be more precise, the li's are inside ul's which are inside p's.)
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Here is the solution (IE and FF tested):
p
{
     margin-left: 60px;
      margin-bottom: 12px;
      width: 400px;

}
ul
{
      max-width:400px;
}

li
{
      padding-left: 0;
      margin-left: 40px;

 }

Commented:
Take a look at previous message for fixed CSS.
I am here now posting the whole HTML text that I have tested with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
p
{
        margin-left: 60px;
      margin-bottom: 12px;
      width: 400px;

}
ul
{
      max-width:400px;
}

li
{
      padding-left: 0;
      margin-left: 40px;

 }


</style>
</head>

<body>
<p>
      <ul>
            <li>
             Finish all training and testing within 60 days of hire. All training and testing is paid at minimum wage.
             Finish all training and testing within 60 days of hire. All training and testing is paid at minimum wage.
             Finish all training and testing within 60 days of hire. All training and testing is paid at minimum wage.
             Finish all training and testing within 60 days of hire. All training and testing is paid at minimum wage.
             Finish all training and testing within 60 days of hire. All training and testing is paid at minimum wage.
             Finish all training and testing within 60 days of hire. All training and testing is paid at minimum wage.
             Finish all training and testing within 60 days of hire. All training and testing is paid at minimum wage.
             Finish all training and testing within 60 days of hire. All training and testing is paid at minimum wage.
             Finish all training and testing within 60 days of hire. All training and testing is paid at minimum wage.
            </li>
      </ul>
</p>
</body>
</html>

Author

Commented:
Unfortunately that doesn't work. The LI's are going all the way across the page, not wrapping at 400 px.

Commented:
Take a look at here live test:
http://amitdev.com/test/puntest.html
The LI widht is fixed 400px.

Commented:
Take a look at here live test:
http://amitdev.com/test/puntest.html
The LI widht is fixed 400px.

Author

Commented:
Actually, it's not fixed on my screen; it's expanding with the window. I'm using IE6. What are you using? I may need a hack.

Commented:
I am using IE 7. I have tested in IE 7 and FF

Author

Commented:
I have to use IE for work, and that is what a lot of my users will use, so I tried something else. I wrapped a div around the content and set that width, and that worked. Thanks though.

Commented:
yeah I know that div can work with that, but I was try to fix that issues as it is without using div.

Author

Commented:
I agree, Khel, that's what I wanted to do, too.
Commented:
Here is the final CSS code, fully tested with IE 6, IE 7, FF:
p
{
        margin-left: 60px;
      margin-bottom: 12px;
      width: 400px;

}
ul
{
      max-width:400px;
        width:400px;
}

li
{
      padding-left: 0;
      margin-left: 40px;

 }

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial