Problems with numbered lists that use css

[Dave Rado]

Hi

1) I want the numbers in my numbered lists to be in bold, but not the
text; is there any way of achieving that if the numbered list uses <ol><li>
tags?

2) Generally, (e.g. when I use the <p> tag), my text is black; but sometimes
I use coloured text - e.g.
p.Callout {color:0000FF;}

But if I apply <ol><li> tags within the coloured text, e.g.:
<ol><li><p class="Callout">
the numbers are black, whereas I want them to be coloured;
is there any way of achieving this?

Regards

Dave

 

[Lauri Raittila]

Hi

1) I want the numbers in my numbered lists to be in bold, but not the
text; is there any way of achieving that if the numbered list uses <ol><li>
tags?

I think

li {font-weight:bold}

Problem is that content will be bolded too.

2) Generally, (e.g. when I use the <p> tag), my text is black; but sometimes
I use coloured text - e.g.
p.Callout {color:0000FF;}

But if I apply <ol><li> tags within the coloured text, e.g.:
<ol><li><p class="Callout">
the numbers are black, whereas I want them to be coloured;
is there any way of achieving this?

..Callout {color:0000FF;}
<ol><li class="Callout"><p>

Only tested in Opera, not sure if same in every browser.

 

[Mitja]

I think

li {font-weight:bold}

Problem is that content will be bolded too.

Sure, but it can be overridden:
<ol><li><p style="font-weight:normal">...

 

[Lauri Raittila]

Sure, but it can be overridden:
<ol><li><p style="font-weight:normal">...

But then you have more than just <ol><li> tags

 

[Mitja]

But then you have more than just <ol><li> tags

Yep, never said it was clean.
Still, from whot OP wrote ("But if I apply <ol><li> tags within the
coloured text, e.g.: <ol><li><p class="Callout">..."), I suppose he already
uses the <p>'s so it is not much of a fuss to implement it.

There is also a pure css solution, but poorly supported and bound to change
in future versions of css (see w3c).

 

[Dave Rado]

Hi Lauri


| > 2) Generally, (e.g. when I use the <p> tag), my text is black; but
sometimes
| > I use coloured text - e.g.
| > p.Callout {color:0000FF;}
| >
| > But if I apply <ol><li> tags within the coloured text, e.g.:
| > <ol><li><p class="Callout">
| > the numbers are black, whereas I want them to be coloured;
| > is there any way of achieving this?
|
| .Callout {color:0000FF;}
| <ol><li class="Callout"><p>
|
| Only tested in Opera, not sure if same in every browser.

That doesn't work in IE when I try it. Does anyone know of a way that does
work in IE?

Regards

Dave

 

[Dave Rado]

Hi Mitja and Lauri


| >>>> 1) I want the numbers in my numbered lists to be in bold, but not
| >>>> the text; is there any way of achieving that if the numbered list
| >>>> uses <ol><li> tags?
| >
| >>> li {font-weight:bold}
| >>>
| >>> Problem is that content will be bolded too.

My text needs to default to normal weight (but with the occasional word
bolded for emphasis).


| >> Sure, but it can be overridden:
| >> <ol><li><p style="font-weight:normal">...
| >
| > But then you have more than just <ol><li> tags
|
| Yep, never said it was clean.
| Still, from whot OP wrote ("But if I apply <ol><li> tags within the
| coloured text, e.g.: <ol><li><p class="Callout">..."), I suppose he
already
| uses the <p>'s so it is not much of a fuss to implement it.

I use <p> tags for lists in which the text is coloured or needs to have a
style applied using "Class="", but not otherwise; and I think I would find
it a nightmare to have to use it for *all* numbered lists (most of which
*don't* have a style applied). I suspect it would be much easier just to use
manually typed numbering in tables for my coloured lists (which are much
less frequently used than the normal ones). I'd hoped to be able to use <li>
tags, but at least tables work..


| There is also a pure css solution, but poorly supported and bound to
change
| in future versions of css (see w3c).

Oh well. If anyone else comes up with a brainwave, please let me know.

Thanks and regards

Dave

 

[C A Upsdell]

| > 2) Generally, (e.g. when I use the <p> tag), my text is black; but
sometimes
| > I use coloured text - e.g.
| > p.Callout {color:0000FF;}
| >
| > But if I apply <ol><li> tags within the coloured text, e.g.:
| > <ol><li><p class="Callout">
| > the numbers are black, whereas I want them to be coloured;
| > is there any way of achieving this?
|
| .Callout {color:0000FF;}
| <ol><li class="Callout"><p>
|
| Only tested in Opera, not sure if same in every browser.

That doesn't work in IE when I try it. Does anyone know of a way that does
work in IE?

The examples lack the '#' character which should precede the colour codes.

 

[Toby A Inkster]

.Callout {color:0000FF;}

You missed a hash.
..Callout {color:#0000FF;}

 

[Dave Rado]

| > | .Callout {color:0000FF;}
| > | <ol><li class="Callout"><p>
| > |
| > | Only tested in Opera, not sure if same in every browser.
| >
| > That doesn't work in IE when I try it. Does anyone know of a way that
does
| > work in IE?
|
| The examples lack the '#' character which should precede the colour codes.


It's the
<ol><li class="Callout"><p>

bit that doesn't work in IE when I try it (the number remains black,
although the text is coloured). My css file is set up correctly.

Regards

Dave

 

[Dave Rado]

| Lauri Raittila wrote:
|
| > .Callout {color:0000FF;}
|
| You missed a hash.
| .Callout {color:#0000FF;}

That's not the issue though.

Regards

Dave

 

[Lauri Raittila]

You missed a hash.
.Callout {color:#0000FF;}

Yes, careless copy paste (tested with different color, and just copy-
pasted the old code). But wont solve problem in IE. OP could try
<ol class="Callout">...

 

[Dave Rado]

Hi Lauri


| OP could try
| <ol class="Callout">...

That doesn't work in IE when I try it either.

Does anyone who has access to IE have any ideas (other than using manually
typed numbering and tables)?

Regards

Dave

 

[Mark Parnell]

Does anyone who has access to IE have any ideas (other than using manually
typed numbering and tables)?

Applying the class to either the <li> or the <ol> elements works here
(IE6, Win2k).

URL?