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.
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.
CSS
Last Comment
Khel4Me
whats your list HTML like? does it have <p>'s inside the <li> ?
ASKER
The li's are inside p's.
ASKER
(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;
}
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>
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>
ASKER
Unfortunately that doesn't work. The LI's are going all the way across the page, not wrapping at 400 px.
ASKER
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
ASKER
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.
ASKER
I agree, Khel, that's what I wanted to do, too.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.