how to change list type

**Stomme poes** · Mar 27 '09, 07:55 AM

The short answer is, you can't. The browsers interpret the ol style (and some for instance don't even support all of them, cough cough IE cough cough).

The longer answer is, you might be able to do something with the :before pseudo-class.

Selectors

http://www.w3.org/TR/CSS21/selector.html#before-and-after

After that, you'd need to play with it to see what can work. Again, our good friend IE is a little behind in this.

Many people use a span inside the li and put their necessary extra text in there, and set list-style itself to none.
<li><span>Secti on 34-a</span> Blah blah blah</li>

**David Laakso** · Mar 27 '09, 08:44 AM

Seems rather elliptical to me. Is it a list? Or is it simply three notes?

Code:

<p class="note">Note 1.</p>
<p class="note">Note 2.</p>
<p class="note">Note 3.</p>

**afromanam** · Mar 27 '09, 04:59 PM

Originally posted by David Laakso

Seems rather elliptical to me. Is it a list? Or is it simply three notes?

Code:

<p class="note">Note 1.</p>
<p class="note">Note 2.</p>
<p class="note">Note 3.</p>

Hi David, Stomme poes, thank you for your answers, they are very much appreciated,

Stomme poes, I've been trying to mess around with the list-type before:{content ....... but thus far no luck, I will try to see if anything comes up.

I agree that it would be the same to list:

Code:

Notes:
<list>
<ol>
<li>TExt</li>
<li>TExt</li>
<li>TExt</li>
</ol>
</list>

But i'm just trying to do a proof-of-concept type of thing

**David Laakso** · Mar 27 '09, 05:37 PM

My comment was directed at the OP. Not you. Make it happen is the name of the game in my book. And I hope you do!

**afromanam** · Mar 28 '09, 06:40 PM

Hi David,

Thanks for you reply
sorry, I don't understad what OP is,

I have this code that actually does what I want, but I need help adding a line break after each <MYLI> element automatically, insted of manually, something like

Code:

MYLI:after{
    content: linebreak;
}

perhaps?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
MYLIST {
    counter-reset: section;      /* Set section to 0 */
}
MYLI:before {
    content: "Note " counter(section) ". ";
    counter-increment: section;
}
</style>
</head>

<body>
<MYLIST>
<MYLI>element</MYLI><br>
<MYLI>element</MYLI><br>
</MYLIST>

<MYLIST>
<MYLI>element</MYLI><br>
<MYLI>element</MYLI><br>
<MYLI>element</MYLI><br>
</MYLIST>

<MYLIST>
<MYLI>element</MYLI><br>
<MYLI>element</MYLI><br>
<MYLI>element</MYLI><br>
<MYLI>element</MYLI><br>
</MYLIST>
</body>
</html>

**afromanam** · Mar 28 '09, 07:04 PM

Well, I finally got it

Generated content, automatic numbering, and lists

http://www.w3.org/TR/CSS2/generate.html#scope

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
OL { counter-reset: item }
LI { display: block }
LI:before { content: "Note " counter(item, decimal) ". "; counter-increment: item }

</style>
</head>

<body>
<list>
<ol>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ol>
</list>
</body>
</html>

Thanks for your replies all,

Have a nice weekend!

BTW If anyone know how to implement this in IE6 please let me know, because I just discovered IE6 doesn't have CSS2 support

**David Laakso** · Mar 28 '09, 08:01 PM

Your markup is not valid and even if it was it is regretable neither IE/6 nor IE/7 support the CSS 2.1 unit "counter" or the pseudo-element ":before"

Web Browser CSS Support

http://www.webdevout.net/browser-support-css

Web browser comparison tables for CSS standards and maturing drafts.

aside: OP stands for "original poster," that is to say it refers to you.

**Stomme poes** · Mar 29 '09, 11:27 AM

Originally posted by David

My comment was directed at the OP. Not you.

Which is confusing as you directed that to the OP. So, no clue what you meant there or to who.

Afro, just remove that goofy <list> element from your HTML to make your code valid. HTML isn't XML-- you can't make your own tags, only your own classes and id's.

**afromanam** · Mar 29 '09, 04:59 PM

David,

You're right about IE6, IE7 CSS 2.1 compatibility

CSS Compatibility and Internet Explorer

http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Stomme poe, I have removed the list tag, thanks for the advice, do you know about a hack that could be used as a counter?

how to change list type

how to change list type

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment