473,416 Members | 1,609 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,416 software developers and data experts.

Help with <ol>, <ul>, and <li>

This is a two-part question to which I haven't been able to find an answer
anywhere else.

1. Is it possible to format the bullet/number character of the <li>? In my
styles sheet, I have the <li> tag formatted, for example, bold. However,
when it's applied, the number of the <li> is not bold, but the text is. Do I
have to apply the bold to the <ol> instead?

2. When I use <li>example text</li>, and when I insert a <br> after the
</li>, the next paragraph of text appears on the same line as the </li> in
the _first line item only_. In subsequent lines, the following paragraph
appears on the next line where I want and expect it to. To correct this, I
have to use either a <p> or a double <br> to push the next paragraph down a
line.

Can I get some help with these?

I appreciate it.

Beck
Jul 20 '05 #1
8 6860
On Thu, 6 May 2004 14:51:53 -0700, Michael <mr****@hotmail.com> wrote:
This is a two-part question to which I haven't been able to find an
answer
anywhere else.

1. Is it possible to format the bullet/number character of the <li>? In
my
styles sheet, I have the <li> tag formatted, for example, bold. However,
when it's applied, the number of the <li> is not bold, but the text is.
Do I
have to apply the bold to the <ol> instead?
Apply bold to the ol, yes, using CSS. You can then set li to font-weight:
normal if you want bold numbering but plain text.
2. When I use <li>example text</li>, and when I insert a <br> after the
</li>, the next paragraph of text appears on the same line as the </li>
in
the _first line item only_. In subsequent lines, the following paragraph
appears on the next line where I want and expect it to. To correct this,
I
have to use either a <p> or a double <br> to push the next paragraph
down a
line.


Use CSS to set a bottom margin of however many em to the li you want more
space below.

You're making the mistake of using <p> as a formatting tool. <p> means
"the following is a paragraph" and though most browsers will have a blank
line, there's no rule that says they must. I've heard that some browsers
ignore multiple <br>s as well.
Jul 20 '05 #2
Neal <ne*****@yahoo.com> wrote:
On Thu, 6 May 2004 14:51:53 -0700, Michael <mr****@hotmail.com> wrote:

1. Is it possible to format the bullet/number character of the <li>? In
my styles sheet, I have the <li> tag formatted, for example, bold. However,
when it's applied, the number of the <li> is not bold, but the text is.
Do I have to apply the bold to the <ol> instead?


Apply bold to the ol, yes, using CSS. You can then set li to font-weight:
normal if you want bold numbering but plain text.


Doesn't work. Browsers seem to treat the marker as part of the <li>
(at least for some properties) even though the relationship is rather
more complex in the spec.

Using a span (or whatever) around the contents of the <li> is the only
reliable way of giving the marker a different appearance in today's
browsers.
ol {font-weight: bold;}
li span {font-weight: normal;}

<ol>
<li><span>everything</li>
</ol>
cheers,
Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #3
Michael wrote:
Is it possible to format the bullet/number character of the <li>? In
my styles sheet, I have the <li> tag formatted, for example, bold.
However, when it's applied, the number of the <li> is not bold, but
the text is.
I thought they were formatted together. Url?
Do I have to apply the bold to the <ol> instead?
You could try that. If you want to format only the bullet, and not the
text, you have to add markup, but it sounds like you have a different
problem.
When I use <li>example</li>, and when I insert a <br> after the </li>
You have invalid markup, and there's no telling what a browser will do
when performing error-correction. The *only* element that can appear
inside <UL> or <OL> is <LI>.
the next paragraph of text appears on the same line as the </li> in
the _first line item only_.
We need a url. Something seems odd. What is the markup?
To correct this, I have to use either a <p> or a double <br> to push
the next paragraph down a line.


It's a bad idea to correct a visual artifact by hacking the html. First,
<P> markup is for paragraphs, not to "push things down." Second, there
is no real meaning to multiple <br> elements, so avoid that, too.
Instead, use css.

li { margin-bottom: 1em; }

I don't know exactly what you want; for a more detailed answer, please
provide the url of your test case.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #4
On Thu, 06 May 2004 23:10:41 +0100, Steve Pugh <st***@pugh.net> wrote:
Doesn't work. Browsers seem to treat the marker as part of the <li>
(at least for some properties) even though the relationship is rather
more complex in the spec.

Using a span (or whatever) around the contents of the <li> is the only
reliable way of giving the marker a different appearance in today's
browsers.
ol {font-weight: bold;}
li span {font-weight: normal;}

<ol>
<li><span>everything</li>
</ol>

Thanks for catching that, Steve.
Jul 20 '05 #5
In article <h9********************@giganews.com>, Michael writes:
2. When I use <li>example text</li>, and when I insert a <br> after the
</li>,
Are you saying that you're doing something like this:

<ol>
<li>example text</li>
<br>
<li>another example</li>
</ol>

If so, it's invalid HTML. The only thing that can be in a list is a
list item. Many browsers will try to guess what you mean by it, but
since it's not valid, their guesses aren't likely to agree.

the next paragraph of text appears on the same line as the </li> in
the _first line item only_.
You have paragraphs in your list, too? Something like this:

<ol>
<li>example text</li>
<br>
<p>The next paragraph of text</p>
<li>another example</li>
</ol>

You can't put paragraphs into a list, only list items. (I think that you
can put paragraphs into list items, but wouldn't swear to it.)

In subsequent lines, the following paragraph
appears on the next line where I want and expect it to. To correct this, I
have to use either a <p> or a double <br> to push the next paragraph down a
line.
Now, I'm more confused. You're talking about "the following paragraph",
and then you say "to correct this, I have to use either a <p> ..." If you
don't have a <p>, how can you have a paragraph? Are you saying that you
have something like this:

<ol>
<li>example text</li>
<br>
Random text not part of any element.
<li>another example</li>
</ol>

That's completely invalid. How different browsers will decide what to do
with it is a complete crapshoot.
Can I get some help with these?


My recommendation would be to eliminate all of your errors first. Get
thee to a validator:

http://validator.w3.org/

After you've eliminated all of the errors that it reports, see if you
still have any problems.

--
Michael F. Stemper
#include <Standard_Disclaimer>
Life's too important to take seriously.

Jul 20 '05 #6
In article <mk********************************@4ax.com>, Steve Pugh writes:
<ol>
<li><span>everything</li>
</ol>
Shouldn't that be:

<ol>
<li><span>everything</span></li>
</ol>
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor


Which Doctor? Colin Baker? He had the ugliest tie.

--
Michael F. Stemper
#include <Standard_Disclaimer>
Life's too important to take seriously.

Jul 20 '05 #7
ms******@siemens-emis.com (Michael Stemper) wrote:
In article <mk********************************@4ax.com>, Steve Pugh writes:
<ol>
<li><span>everything</li>
</ol>


Shouldn't that be:

<ol>
<li><span>everything</span></li>
</ol>


Yes it should.
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor


Which Doctor? Colin Baker? He had the ugliest tie.


Sylvester McCoy.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #8
On Fri, 7 May 2004 08:01:12 -0500, Michael Stemper
<ms******@siemens-emis.com> wrote:
(I think that you
can put paragraphs into list items, but wouldn't swear to it.)


It's valid.
Jul 20 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Chris Goldie | last post by:
From an accessibility point of view, is there any advange in using <P> over <br>? eg, whats the difference between these two examples, are they both accessible? Eg. 1 <p>My first...
4
by: Timo Nentwig | last post by:
Hi! Is the following possible?         1. one   3. three         2. two   4. four And if so, how? If not, an offset attribute should be added to the next version of XHTML:
3
by: abro | last post by:
Problem: A list contained in a div contains several items that are made of two parts: itemName and itemValue. ie: <div id="data"> <li>longtime1 <span> 1326 mins></span></li> <li>longtime2...
4
by: Peter | last post by:
Hi at all To make a list using <UL><IL> showed horizontally AND with ITEMS SPACED 30pixels. waht CSS command have I to use please? Thank in advance Peter
4
by: Mark | last post by:
Hopefully I 'm missing something silly, but I can't find an easy way to loop all list items in a simple <ol>. I was hoping a for loop as shown below would be enough, however clicking "alert all" in...
1
by: Alex Nitulescu | last post by:
Hi. Something puzzles me: VS.NET says that "per the active schema, li cannot be nested within td". However, the code works fine, and the result is as I expected. Is there something wrong in...
7
by: patrick j | last post by:
Hi I'm wondering about lists with nested lists as one does on a Saturday afternoon. Anyway below is an example of a list with a nested list which the iCab browser's very useful HTML...
3
by: Man-wai Chang | last post by:
A 2 columns x 10 rows matrix input form <ul> <li> <ul> <li>item name 1 <li><input type="textbox" name="input_col_1_row_1"> <li><input type="textbox" name="input_col_1_row_2"> </ul> <li>
2
by: Shahid | last post by:
Hi, I am parsing an .HTML file that contains following example code: <div> <p class="html_preformatted" awml:style="HTML Preformatted" dir="ltr" style="text-align:left"><span...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.