21 replies [Last post]
MrSnrub
MrSnrub's picture
Offline
Regular
Last seen: 8 years 4 weeks ago
Timezone: GMT-4
Joined: 2010-11-05
Posts: 19
Points: 26

I want my ordered lists to look like the following:

(a) This is a line of texr.
    (1) Here 
    (2) There
    (3) Everywhere
(b) This is another line of text.
    (1) Neither snow nor rain nor heat nor gloom of night stays these couriers from the swift 
        completion of their appointed rounds.
(c) This is yet another line of text.

Note the indented hanging text starts right below "Neither" rather than (1), and the markers are (a), (b), (c), ... and (1), (2), (3),... which I'll be darned if I can figure out how to do in regular HTML. How can I use CSS to do this?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 32 weeks 12 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Where's your code? How have

Where's your code? How have you defined your list styles?

MrSnrub
MrSnrub's picture
Offline
Regular
Last seen: 8 years 4 weeks ago
Timezone: GMT-4
Joined: 2010-11-05
Posts: 19
Points: 26

So, this is my style: <style

So, this is my style:

<style type="text/css">
     BODY{font-family:Helvetica,Arial,sans-serif}
 
     .number
     {
           list-style-type: lower-latin;
           list-style-position: outside;
     }
     .alpha
     {
           list-style-type: lower-alpha;
           list-style-position: outside;
     }
</style>

... and this is where I'm actually displaying the outline:

<ol class="alpha">
   <li>This is a line of text.
       <ol class="number">
           <li>Here</li>
           <li>There</li>
           <li>Everywhere</li>
       </ol>
   </li>
   <li>This is another line of text.
       <ol class="number">
           <li>Neither snow nor rain nor heat nor gloom of 
night stays these couriers from the swift completion of 
their appointed rounds.</li>
       </ol>
   </li>
   <li>This is yet another line of text.</li>
</ol>
</p>

The text is getting hanging-indented correctly, which is good, but the numbers aren't showing up, only the letters. Plus, I need the parentheses around both the letters and numbers. How do I fix this?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 32 weeks 12 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Most of the folk here tend to

Most of the folk here tend to require you post all your code. The reasons are that I can see that your code isn't valid and how would I know if you're using a correct standards switching doctype?

Regardless, consider the following:

<!DOCTYPE html>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template</title>
<style type="text/css">
ol { counter-reset: set; }
ol ol { counter-reset: subset; }
ol li {list-style: none; list-style-position: outside; clear: both;}
ol li:before { counter-increment: set;
			content: "(" counters(set,".", lower-alpha) ")"; display: block; float: left; clear: left; height: 100%; border: 1px solid transparent; position: relative; top:0;}
ol li ol li:before { counter-increment: subset;
			content: "(" counters(subset,".") ")";}
 
 
</style>
</head>
<body>
<ol>
	<li>This is item one
	<ol><li>First sub-item</li>
		<li>Second sub-item</li>
	</ol>
	</li>
	<li>This is item two
	</li>
	<li>This is item three
	<ol><li>First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item </li>
		<li>Second sub-item</li>
		<li>Third sub-item</li>
		<li>Fourth sub-item</li>
	</ol>
	</li>
</ol>
</body>
</html>

MrSnrub
MrSnrub's picture
Offline
Regular
Last seen: 8 years 4 weeks ago
Timezone: GMT-4
Joined: 2010-11-05
Posts: 19
Points: 26

using the following code

using the following code exactly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head>
<title>Template</title>
<style type="text/css">
	ol 
	{ 
		counter-reset: set; 
	}
    ol ol 
    { 
        counter-reset: subset; 
    }
    ol li 
    {
        list-style: none; 
        list-style-position: outside; 
        clear: both;
    }
    ol li: before 
    { 
        counter-increment: set;
		content: "(" counters(set, ".", lower-alpha) ")"; 
		display: block; 
		float: left; 
		clear: left; 
		height: 100%; 
		border: 1px solid transparent; 
		position: relative; 
		top: 0;
	}
    ol li ol li: before 
    { 
        counter-increment: subset;
		content: "(" counters(subset,".") ")";
	}
 
</style>
</head>
<body>
<ol>
	<li>This is item one
	<ol><li>First sub-item</li>
		<li>Second sub-item</li>
	</ol>
	</li>
	<li>This is item two
	</li>
	<li>This is item three
	<ol><li>First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item First sub-item </li>
		<li>Second sub-item</li>
		<li>Third sub-item</li>
		<li>Fourth sub-item</li>
	</ol>
	</li>
</ol>
</body>
</html>

...I can't get the numbers and letters to show up. Plus, my webpage editing program is saying that "counter-increment" and "content" are not valid CSS property names in CSS 1.0. Why not?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 52 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

The current standard, which

The current standard, which the major browsers support, is css2.1.

I didn't test, but I'd guess the float stuff could screw things up. Why would you have that? Remove the position, top, float and clear properties. That ought to fix you up.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 32 weeks 12 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

gary.turner wrote:... I

gary.turner wrote:

... I didn't test, but I'd guess the float stuff could screw things up. Why would you have that? Remove the position, top, float and clear properties. That ought to fix you up.

Well, it wasn't screwing things up but you're right, it seems to be unnecessary. Excuse my experimentation and multiple directions in this thread. I'd never used this technique before and it is a bit of trial and error. Wink
Originally, I was thinking that without the display: block; the list-item text goes below the number if there is enough text to wrap. One of the stipulations of the OP was that this should not occur. Of course it seems that only one extra line is indented due to the border (which is probably better replaced with a margin). The float/clear is used to move it to the left of the list-item so that it appears as it should instead of on its own line. Of course there may very well be a better way. Smile

EDIT - To OP: I see your problem and you should adopt a practice of validating your code.

": before" does not equal ":before" validating solves this.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 32 weeks 12 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

This seems to do it properly:

This seems to do it properly:

ol { counter-reset: set; position: relative;}
ol ol { counter-reset: subset; }
ol li {list-style: none; list-style-position: outside; clear: both; }
ol li:before { counter-increment: set;
			content: "(" counters(set,".", lower-alpha) ")"; position: absolute; left: 0; }
ol li ol li:before { counter-increment: subset;
			content: "(" counters(subset,".") ")";}

It seems this a much better solution and an appropriate use of position: absolute;. Please correct me if I'm wrong. Smile Online at: http://feelerdealer.com/olStyle3.html

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 52 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Engage brain before mouth (keyboard)

I spoke before fully understanding the issues. Your last iteration seems to do the job. I would quibble about the redundant ol li {list-style-position: outside; clear: both; }.

I think I would make :before's containing box the <li> rather than the <ol>. It probably wouldn't make any non-trivial difference, but it seems the more logical container.

ol li {
  list-style: none; 
  position: relative;
  }
 
ol li:before { 
  ...
  position: absolute;
  left: -40px;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 32 weeks 12 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

I'm sure I left in some

I'm sure I left in some redundancy, the code isn't cleaned up. I'll leave that up to the OP. Wink

Quite frankly, I have no idea why those are even in there. Laughing out loud

MrSnrub
MrSnrub's picture
Offline
Regular
Last seen: 8 years 4 weeks ago
Timezone: GMT-4
Joined: 2010-11-05
Posts: 19
Points: 26

that is beautiful! both

that is beautiful! both solutions worked great!

one question: now what do i do from here on out if i want to have just an ordered list of numbers (no letters)?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 32 weeks 12 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Check here:

Check here: http://www.w3schools.com/css/pr_list-style-type.asp

I'll send you a bill.

MrSnrub
MrSnrub's picture
Offline
Regular
Last seen: 8 years 4 weeks ago
Timezone: GMT-4
Joined: 2010-11-05
Posts: 19
Points: 26

I got it!! This does the job

I got it!! This does the job perfectly:

<style type="text/css">
 
  body
  {
    font-family:Arial, Helvetica, sans-serif;
  }
 
  ol
  {
    counter-reset: set;
    position: relative;
  }
 
  ol ol
  {
    counter-reset: subset;
  }
 
  ol li
  {
    list-style: none;
    position: relative;
  }
 
  ol li:before
  {
    counter-increment: set;
    content: "(" counters(set, ".", lower-alpha) ")";
    position:absolute;
    left: -40px;
  }
 
  ol li ol li:before
  {
    counter-increment: subset;
    content: "(" counters(subset,".") ")";
  }
 
  ol.num
  {
    list-style: none;
    position: relative;
  }
 
  ol.num:before
  {
    counter-reset: set;
    position:relative;
  }
 
  ol li.num:before
  {
    counter-increment: set;
    content: "(" counters(set, ".") ")";
  }
}
</style>

I have absolutely NO idea if I did it correctly, but it looks perfect (in Firefox)! Thank you so much!!

Now my next question is: Why doesn't any of this work in Internet Explorer and what can I do about it?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 32 weeks 12 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Which version of IE? Where's

Which version of IE? Where's your code? Is it valid? How about a link?

MrSnrub
MrSnrub's picture
Offline
Regular
Last seen: 8 years 4 weeks ago
Timezone: GMT-4
Joined: 2010-11-05
Posts: 19
Points: 26

I'm using IE 7. Well,

I'm using IE 7. Well, 7.0.5730.11 to be precise.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test List</title>
<style type="text/css">
 
body
{
  font-family:Arial, Helvetica, sans-serif;
}
 
ol
{
  counter-reset: set;
  position: relative;
}
 
ol ol
{
  counter-reset: subset;
}
 
ol li 
{
  list-style: none;
  position: relative;
}
 
ol li:before 
{
  counter-increment: set;
  content: "(" counters(set, ".", lower-alpha) ")";
  position:absolute;
  left: -40px;
}
 
ol li ol li:before
{
  counter-increment: subset;
  content: "(" counters(subset,".") ")";
}
 
ol.num
{
  list-style: none;
  position: relative;
}
 
ol.num:before 
{
  counter-reset: set;
  position:relative;
}
 
ol li.num:before
{
  counter-increment: set;
  content: "(" counters(set, ".") ")";
}
 
</style>
</head>
 
<body>
 
<strong>This is an indented ordered list of letters, then numbers:</strong>
<ol>
  <li>This is item one, which contains two sub-items.
    <ol>
      <li>First sub-item</li>
      <li>Second sub-item</li>
    </ol>
  </li>
  <li>This is item two</li>
  <li>This is item three, which contains four sub-items.
    <ol>
      <li>First sub-item First sub-item First sub-item First sub-item 
          First sub-item First sub-item First sub-item First sub-item 
          First sub-item First sub-item First sub-item First sub-item 
          First sub-item First sub-item First sub-item First sub-item 
          First sub-item First sub-item First sub-item First sub-item
      </li>
      <li>Second sub-item</li>
      <li>Third sub-item</li>
      <li>Fourth sub-item</li>
    </ol>	
  </li>
</ol>
 
<strong>This is an indented ordered list of numbers:</strong>
<ol>
  <li class="num">
    Item one. Item one. Item one. Item one. Item one. 
    Item one. Item one. Item one. Item one. Item one. 
    Item one. Item one. Item one. Item one. Item one. 
    Item one. Item one. Item one. Item one. Item one. 
  </li>
  <li class="num">Item two.</li>   
  <li class="num">Item three.</li>      
</ol>
 
</body>
</html>

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 4 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

IE prior to 8 doesn't support

IE prior to 8 doesn't support :before, counter-increment or content.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

MrSnrub
MrSnrub's picture
Offline
Regular
Last seen: 8 years 4 weeks ago
Timezone: GMT-4
Joined: 2010-11-05
Posts: 19
Points: 26

Well ain't that a shame! Can

Well ain't that a shame! Can you recommend an alternative? Is there any alternate strategy I can use for thee old IE browsers? Is there any way I can even see what browser the user is using?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 32 weeks 12 hours ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

I imagine jQuery would make a

I imagine jQuery would make a good stand-in.

MrSnrub
MrSnrub's picture
Offline
Regular
Last seen: 8 years 4 weeks ago
Timezone: GMT-4
Joined: 2010-11-05
Posts: 19
Points: 26

Urgh... so I need to learn a

Urgh... so I need to learn a whole 'nother language. Yikes.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 52 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

Graceful degradation

Were it I doing it, I'd use a conditional comment to feed IE<8 appropriate list styles from html. You'd lose the parentheses, but not the information.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

MrSnrub
MrSnrub's picture
Offline
Regular
Last seen: 8 years 4 weeks ago
Timezone: GMT-4
Joined: 2010-11-05
Posts: 19
Points: 26

OK I'm very hapy with this.

OK I'm very hapy with this. What I did was, like gary.turner said, I found a way to determine whether the browser was IE 7 or below or whether it was IE 8 or greater or whether it was not an IE browser at all, and I had the page act accordingly:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test List</title>
 
<!--[if gte IE 8]>
<style type="text/css">
 
body
{
 font-family:Arial, Helvetica, sans-serif;
}
 
ol
{
 counter-reset: set;
 position: relative;
}
 
ol ol
{
 counter-reset: subset;
}
 
ol li
{
 list-style: none;
 position: relative;
}
 
ol li:before
{
 counter-increment: set;
 content: "(" counters(set, ".", lower-alpha) ")";
 position:absolute;
 left: -40px;
}
 
ol li ol li:before
{
 counter-increment: subset;
 content: "(" counters(subset,".") ")";
}
 
ol.num
{
 list-style: none;
 position: relative;
}
 
ol.num:before
{
 counter-reset: set;
 position:relative;
}
 
ol li.num:before
{
 counter-increment: set;
 content: "(" counters(set, ".") ")";
}
<![endif]-->
 
<!--[if lt IE 8]>
<style type="text/css">
  body
   {
      font-family:Arial, Helvetica, sans-serif;
   }
 
  ol
  {
    counter-reset: set;
    position: relative;
  }
 
  ol ol
  {
    counter-reset: subset;
  }
 
  ol li
  {
    list-style: lower-alpha;
    position: relative;
  }
 
  ol li ol li
  {
    list-style: decimal;
    position: relative;
  }
 
  li.num
  {
    list-style: decimal;
    position: relative;
  }
</style>
<![endif]-->
 
<![if !IE]>
<style type="text/css">
 
body
{
 font-family:Arial, Helvetica, sans-serif;
}
 
ol
{
 counter-reset: set;
 position: relative;
}
 
ol ol
{
 counter-reset: subset;
}
 
ol li
{
 list-style: none;
 position: relative;
}
 
ol li:before
{
 counter-increment: set;
 content: "(" counters(set, ".", lower-alpha) ")";
 position:absolute;
 left: -40px;
}
 
ol li ol li:before
{
 counter-increment: subset;
 content: "(" counters(subset,".") ")";
}
 
ol.num
{
 list-style: none;
 position: relative;
}
 
ol.num:before
{
 counter-reset: set;
 position:relative;
}
 
ol li.num:before
{
 counter-increment: set;
 content: "(" counters(set, ".") ")";
}
<![endif]>
</style>
 
</head>
 
<body>
<!--[if gte IE 8]><p>You are using Internet Explorer 8 or greater.</p><![endif]-->
<!--[if lt IE 8]><p>You are using a version of Internet Explorer less than
8. Upgrade you dolt!</p><![endif]-->
<![if !IE]><p>You are not using Internet Explorer.</p><![endif]>
 
 
<strong>Test 1</strong>
<ol>
  <li>This is item one, which contains two sub-items.
      <ol>
         <li>First sub-item</li>
         <li>Second sub-item</li>
      </ol>
  </li>
  <li>This is item two</li>
  <li>This is item three, which contains four sub-items.
      <ol>
         <li>First sub-item First sub-item First sub-item First sub-item
             First sub-item First sub-item First sub-item First sub-item
             First sub-item First sub-item First sub-item First sub-item
             First sub-item First sub-item First sub-item First sub-item
             First sub-item First sub-item First sub-item First sub-item
         </li>
         <li>Second sub-item</li>
         <li>Third sub-item</li>
         <li>Fourth sub-item</li>
      </ol>
  </li>
</ol>
 
<strong>Test 2</strong>
<ol>
  <li class="num">
         Item one. Item one. Item one. Item one. Item one.
      Item one. Item one. Item one. Item one. Item one.
      Item one. Item one. Item one. Item one. Item one.
      Item one. Item one. Item one. Item one. Item one.
  </li>
  <li class="num">Item two.</li>
  <li class="num">Item three.</li>
</ol>
 
</body>
</html>

Unfortunately, I couldn't find a way to say "if it's an IE browser >= 8 or if it's not an IE browser" because of the way the IE browser conditional statements need two ashes and the non-IE conditional statement does not. So two of three styles are exactly the same.

What do you guys think? Looks good? Looks bad? Ready to deploy? People won't laugh at me if they view my source code?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 52 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

You've way over-thought

You've way over-thought things. All modern browsers support the counter version. The only anomalies are IE<8. So, only IE<8 need be segregated. Everyone else gets the modern styles.

<style type="text/css">
[all the styles for the page including that which Verschwindende developed.]
</style>
 
<!--[if lt ie8]>
<style type="text/css">
ol {
  position: static;
  }
 
ol li {
  list-style-type: lower-alpha;
  position: static;
  }
 
ol ol li {
  list-style-type: decimal;
  position: static;
  }
</style>
<![endif]-->

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.