472,795 Members | 2,429 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,795 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 6796
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.one3.three 2.two4.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: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
0
by: lllomh | last post by:
How does React native implement an English player?
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

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.