troubleshooting Question

Formatting list items with CSS, bullets in wrong place

Avatar of punstress
punstressFlag for United States of America asked on
CSS
14 Comments1 Solution271 ViewsLast Modified:
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.
ASKER CERTIFIED SOLUTION
Khel4Me

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 14 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 14 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros