Link to home
Start Free TrialLog in
Avatar of punstress
punstressFlag for United States of America

asked on

Formatting list items with CSS, bullets in wrong place

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.
Avatar of VirusMinus
VirusMinus
Flag of Australia image

whats your list HTML like? does it have <p>'s inside the <li> ?
Avatar of punstress

ASKER

The li's are inside p's.
(Or, to be more precise, the li's are inside ul's which are inside p's.)
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;

 }
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>
Unfortunately that doesn't work. The LI's are going all the way across the page, not wrapping at 400 px.
Avatar of hawkscay
hawkscay

Take a look at here live test:
http://amitdev.com/test/puntest.html
The LI widht is fixed 400px.
Take a look at here live test:
http://amitdev.com/test/puntest.html
The LI widht is fixed 400px.
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.
I am using IE 7. I have tested in IE 7 and FF
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.
yeah I know that div can work with that, but I was try to fix that issues as it is without using div.

I agree, Khel, that's what I wanted to do, too.
ASKER CERTIFIED SOLUTION
Avatar of Khel4Me
Khel4Me
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial