List indent problem

HTML & CSS
1

please take a look at the list I’ve made.
I would like it to have a “double indent” for the golden chrysalis line. I can get that by not having a non-breaking space,  , after the second level list item which incorrect. When I put in the   I get an extra line. How do I not have the extra line space and still have validation happen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list indent problem</title>
</head>

<body>
<p>list</p>
<ol>
	<li>aardvark</li>
	<li>blue sailfish</li>
	<li>chartreuse caterpillar</li>
		<ul>
			<li style="list-style-type: none;">
				<ol>
					<li style="list-style-type: none;">golden chrysalis </li>
				</ol>
			</li>
			<li>cecropia moth</li>
			<li>monarch butterfly</li>
			<li>luna moth</li>
		</ul>
	<li>dynamic duo doggies</li>
	<li>elegant elephant</li>
	<li>gregarious giraffe</li>
</ol>
</body>
</html>

this has the extra space, what I don’t want

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list indent problem</title>
</head>

<body>
<p>list</p>
<ol>
	<li>aardvark</li>
	<li>blue sailfish</li>
	<li>chartreuse caterpillar</li>
		<ul>
			<li style="list-style-type: none;">&nbsp;
				<ol>
					<li style="list-style-type: none;">golden chrysalis </li>
				</ol>
			</li>
			<li>cecropia moth</li>
			<li>monarch butterfly</li>
			<li>luna moth</li>
		</ul>
	<li>dynamic duo doggies</li>
	<li>elegant elephant</li>
	<li>gregarious giraffe</li>
</ol>
</body>
</html>
2

If you nest ULs in others (or OLs), the sub UL goes inside one the the top OL’s LIs.

Is this what you want?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>list indent problem</title>

<style type="text/css" media="all">
ol li ol {list-style-type: none;}
ol li ul li.indent {padding-left: 40px;list-style: none;}
</style>
</head>

<body>
<p>list</p>
<ol>
	<li>aardvark</li>
	<li>blue sailfish</li>
	<li>chartreuse caterpillar
		<ul>
			<li class="indent">golden chrysalis </li>
			<li>cecropia moth</li>
			<li>monarch butterfly</li>
			<li>luna moth</li>
		</ul>
	</li>
	<li>dynamic duo doggies</li>
	<li>elegant elephant</li>
	<li>gregarious giraffe</li>
</ol>
</body>
</html>
3

Hi,
I could not understand which example you were saying you wanted it to resemble.

You should be able to do it with just one nested list though. You can target the first list item in the nested list and give it a numeral instead of a disc.

The styling possibilities are endless when it comes to nested lists but it is all about resetting the inherited styles as you go along.

See if this is close to what you are after:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3 arial,helvetica,sans-serif;
}
ol {
    float:left;
    margin:20px;
    padding:10px 10px 10px 30px;
    background: #CDF;
}
ol ul {
    margin: 10px 0;
    padding:0 10px 0 25px;
    background: #EEF;
}
ol ul li {margin-left:15px;}

ol ul li:first-child {list-style:decimal; margin:0}
</style>

</head>
<body>

<ol>
    <li>aardvark</li>
    <li>blue sailfish</li>
    <li>chartreuse caterpillar
        <ul>
            <li>golden chrysalis</li>
            <li>cecropia moth</li>
            <li>monarch butterfly</li>
            <li>luna moth</li>
        </ul>
    </li>
    <li>dynamic duo doggies</li>
    <li>elegant elephant</li>
    <li>gregarious giraffe</li>
</ol>

</body>
</html>
4

I would like it to have a “double indent” for the golden chrysalis line.

If you just want that first nested list-item to have more indent and a decimal then you can remove the left margins I set on the list-items that followed it.

Then increase the left margin on the first nested li

You can replace the styles I used above with these if you want to swap the indents.

ol {
    float:left;
    margin:20px;
    padding:10px 10px 10px 30px;
    background: #CDF;
}
ol ul {
    margin: 10px 0;
    [COLOR=Blue]padding:0 10px 0 20px;[/COLOR]
    background: #EEF;
}
ol ul li:first-child {
    list-style:decimal;
    [COLOR=Blue]margin-left:20px;[/COLOR]
}
5

Thanks both!
I’m ending up using:


ol {
    float:left;
    margin:20px;
    padding:10px 10px 10px 30px;
    background: #CDF;
}
ol ul {
    margin: 1px 0;
    padding:0 10px 0 20px;
    background: #EEF;
}
ol ul li:first-child {
    list-style:decimal;
    margin-left:20px;
    list-style-type: none;
}

I’m curious about a few things:
in:

font: 100%/1.3 arial,helvetica,sans-serif;

what is the: 100%/1.3, what does it do? I mean I know what it does, I don’t have to specify the font size?
And about the

ol ul li:first-child

.
I see that makes the indent happen. How would I, just wondering, do that without the “first-child”?

So if I were to do another indent that would look like


ol ul ol li:first-child {
    list-style:decimal;
    margin-left:20px;
    list-style-type: none;
}

&

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
 
<style type="text/css">
body {
    margin:0;
    padding:0;
    font: 100%/1.3em arial,helvetica,sans-serif;
}

ol {
    float:left;
    margin:20px;
    padding:10px 10px 10px 30px;
    background: #CDF;
}
ol ul:first-child {
    margin: 1px 0;
    padding:0 10px 0 20px;
    background: #EEF;
}
ol ul li:first-child {
    list-style:decimal;
    margin-left:20px;
	list-style-type: none;
}
ol ul ol li:first-child {
    list-style:decimal;
	list-style-type: lower-alpha;;
}

</style>
 
</head>
<body>
 
<ol>
    <li>aardvark</li>
    <li>blue sailfish</li>
    <li>chartreuse caterpillar
        <ul>
            <li>golden chrysalis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque feugiat lorem eu arcu cursus faucibus. Maecenas in sagittis orci. Cras nec ligula risus. Nulla iaculis dolor non arcu malesuada convallis. Donec lacus leo, commodo sit amet tincidunt eu, tempor nec nibh. Nam malesuada vulputate augue vel convallis. Nullam id consectetur lorem. Proin commodo gravida pulvinar. Quisque rutrum, arcu nec gravida eleifend, risus sem interdum enim, vitae mattis ligula eros eu quam. Morbi metus nunc, imperdiet at sodales vitae, sollicitudin nec orci. Vivamus tincidunt massa ut urna luctus eu iaculis urna sollicitudin. Suspendisse ac aliquam massa. Praesent blandit risus in lectus ultricies eu aliquam nisi sollicitudin. Nulla rutrum vehicula nunc, eget luctus nulla ultricies vitae. Nullam porta, nibh vel tempor cursus, sem magna cursus lectus, et posuere nibh felis sed augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
           		<ol>
					<li>flying, sollicitudin nec orci. </li>
					<li>Item 1 Ivamus tincidunt massa ut urna luctus eu iaculis urna sollicitudin. </li>
					<li>item 2 -  ~~~~~~~~~~~~~~~ Suspendisse ac aliquam massa. Praesent blandit risus in lectus ultricies eu aliquam nisi sollicitudin. Nulla rutrum vehicula nunc, eget luctus nulla ultricies vitae. Nullam porta, nibh vel tempo</li>
				</ol>
		    </li>
		    <li>cecropia moth</li>
            <li>monarch butterfly</li>
            <li>luna moth</li>
        </ul>
    </li>
    <li>dynamic duo doggies</li>
    <li>elegant elephant</li>
    <li>gregarious giraffe</li>
</ol>

</body>
</html>>

except it doesn’t look exactly like what I want – less indent and top and bottom space – so obviously, I’m not understanding what is going on.

Last question, I’d like the numbering to start with “1” rather than “2”.

thanks for any explanation (s)
:slight_smile:

6

what is the: 100%/1.3, what does it do? I mean I know what it does, I don’t have to specify the font size?

Hi,
That just sets the base font properties on the body element and it gets inherited through the page. The 100% is the font size and it uses the browsers default settings. The 1.3 is the line-height and without a unit following it just becomes a multiplier.

I see that makes the indent happen. How would I, just wondering, do that without the “first-child”?

You would just set up a class on all the first list-items that you wanted to style differently.

except it doesn’t look exactly like what I want – less indent and top and bottom space – so obviously, I’m not understanding what is going on.

The easiest thing for you to do is set up some temporary background colors so you can see what is going on as you reset your styles through the nested lists.

Last question, I’d like the numbering to start with “1” rather than “2”.

I believe you would need to use the counter-reset for that to redefine the numbering sequence.

Here’s an example of it resetting the numbers on three separate ULs.

Here is the code you posted above with some revisions and BG colors added for clarity. I don’t have the counter-reset in place yet but I will look at that later if I get a chance.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
 
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 100%/1.3em arial, helvetica, sans-serif;
}
ol {
    width: 500px;
    margin: 20px;
    padding: 5px 10px 5px 30px;
    background: orange;
}
ol li {
    margin: 5px 0;
    background: #BCF;
}
ol ul {
    margin: 0;
    padding: 3px 5px 3px 20px;
    background: cyan;
}
ol ul li {
    margin: 2px 0 2px 20px;
    background: #FFF
}
ol ul li.first {
    list-style: none;
    margin-left: 0;/*remove 20px left margin from rule above*/
    padding-bottom: 5px;
}
ol ul ol {/*resets from parent OL*/
    width: auto;
    margin: 0;
    padding: 5px 5px 5px 25px;
    background: yellow;
}
ol ul ol li {
    background: lime;
}
ol ul ol li.first {
    list-style: lower-alpha;
}

</style>
 
</head>
<body>
 
<ol>
    <li>aardvark</li>
    <li>blue sailfish</li>
    <li>chartreuse caterpillar
        <ul>
            <li class="first">golden chrysalis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque 
            feugiat lorem eu arcu cursus faucibus. Maecenas in sagittis orci. Cras nec ligula risus.
                <ol>
                    <li class="first">flying, sollicitudin nec orci.</li>
                    <li>Item 1 - Ivamus tincidunt massa ut urna luctus eu iaculis urna sollicitudin.</li>
                    <li>item 2 - Suspendisse ac aliquam massa. Praesent blandit risus in lectus.</li>
                </ol>
            </li>
            <li>cecropia moth</li>
            <li>monarch butterfly</li>
            <li>luna moth</li>
        </ul>
    </li>
    <li>dynamic duo doggies</li>
    <li>elegant elephant</li>
    <li>gregarious giraffe</li>
</ol>

</body>
</html>
7

Here it is with the counter-resets in place, you’ll just have to play with it to get all the indents the way you want them.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
 
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 100%/1.3em arial, helvetica, sans-serif;
}
ol {
    width: 500px;
    margin: 20px;
    padding: 5px 10px 5px 30px;
    background: orange;
}
ol li {
    margin: 5px 0;
    background: #BCF;
}
ol ul {
    margin: 0;
    padding: 3px 5px 3px 25px;
    background: cyan;
}
ol ul li {
    margin: 2px 0 2px 10px;
    background: #FFF;
}
ol ul li.first {
    list-style: none;
    margin-left: 0;
    padding-bottom: 5px;
}
ol ul ol {/*resets from parent OL*/
    width: auto;
    margin: 0;
    padding: 5px 5px 5px 25px;
    background: yellow;
}
ol ul ol li {
    background: lime;
    list-style: none;
    counter-increment: item;
    margin-left: 0;
    padding-left: 1.5em;
}
ol ul ol li.first {
    list-style: lower-alpha;
    counter-increment: none;
    padding-left: 0;
}
ol ul ol li:before {
    display: inline-block; 
    width: 1em;
    margin-left: -1.5em;
    margin-right: .5em;
    text-align: center;
    content: counter(item, decimal) ".";
    background: pink;
}
ol.reset li.first:before {display: none;}
ol.reset {counter-reset:item 0;}

</style>
 
</head>
<body>
 
<ol>
    <li>aardvark</li>
    <li>blue sailfish</li>
    <li>chartreuse caterpillar
        <ul>
            <li class="first">golden chrysalis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque 
            feugiat lorem eu arcu cursus faucibus. Maecenas in sagittis orci. Cras nec ligula risus.
                <ol class="reset">
                    <li class="first">flying, sollicitudin nec orci.</li>
                    <li>Ivamus tincidunt massa ut urna luctus eu iaculis urna sollicitudin.</li>
                    <li>Suspendisse ac aliquam massa. Praesent blandit risus in lectus.</li>
                </ol>
            </li>
            <li>cecropia moth</li>
            <li>monarch butterfly</li>
            <li>luna moth</li>
        </ul>
    </li>
    <li>dynamic duo doggies</li>
    <li>elegant elephant</li>
    <li>gregarious giraffe</li>
</ol>

</body>
</html>
8

Hi,
I got stuck with some of this being convoluted for me to understand and am thinking I just need a better understanding of lists, and nesting lists.
I’ll work on that.
The question that’s making me crazy right now is, say I want to use an image at the top of the ol, but I don’t want the image to be on the rest of the bullets some of which will be circles, discs, upper-alpha and the like.
I tried inline manhandling the li with a <style=“list-style:upper-roman” inline but all I get is the image.
Bonkers… is that the way it works, that once you have an image, you are stuck with it for the rest of the page? The effect I want is of a dash, which there are none.
thank you…so much

9

I got stuck with some of this being convoluted for me to understand and am thinking I just need a better understanding of lists, and nesting lists.

Hi,
I suspected that it may have been too much for you to get a grasp on. As I mentioned in my first post, “when it comes to nested lists but it is all about resetting the inherited styles as you go along”.

say I want to use an image at the top of the ol, but I don’t want the image to be on the rest of the bullets

If you are talking about list-style-image I would stay away from that since it is buggy in IE. Better to just use the bullet image as a background image and set a left padding on the <li> to preserve the space for that BG image.

As far as the rest of the bullets as you call them it’s just about resetting them to not have that image.

You will need to post your current code if you need help finding any errors in your list-style overrides.