 |
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place. |
Welcome to the p2p.wrox.com Forums.
You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
|
|
|

October 7th, 2004, 11:54 PM
|
Friend of Wrox
|
|
Join Date: Jan 2004
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
|
|
Append String to an ordered list item
HTML'ers
Hello and good day. Does any body know how to append a string before the integer in an ordered list - on the same line!!
Objective is to produce:
Chapter 1.
Chapter 2.
Chapter 3.
We all know
<ol>
<li>first</li>
<li>second</li>
<li>third</li>
</ol>
produces
1. first
2. second
3. third
However any text before the <li> appears onthe line above the <li> integer value, so the obvious being:
<ol>
Chapter<li>first</li>
Chapter<li>second</li>
Chapter<li>third</li>
</ol>
doesnt work - Any ideas?
Note: I do realize this can be done without using the <ol>'s and <li>'s - for reasons beyond my control, these must remain.
Thank you in advance
Wind is your friend
Matt
__________________
Wind is your friend
Matt
|

October 8th, 2004, 03:15 AM
|
Friend of Wrox
|
|
Join Date: Jun 2003
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
|
|
CSS float style should keep the Chapter on the same line as the li, try
<span style="float:left;">Chapter</span><li>...</li>
|

October 8th, 2004, 05:24 AM
|
Friend of Wrox
|
|
Join Date: Jan 2004
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
|
|
pgTips
It sure does however it moves 'Chapter' hard left and the list numbers sit on top of the text. When I put them in a table the list numbers turn into bullet points. In a table the type="1" to force a numbered list fails to change the list type - mmmm, seems so simple.
Wind is your friend
Matt
|

October 8th, 2004, 06:00 AM
|
Friend of Wrox
|
|
Join Date: Jun 2003
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
|
|
Nasty! have you tried using the CSS list-style-type: decimal; and maybe some relative positioning to push the items away from the Chapter text?
Sounds like this is one for richard york!
rgds
Phil
|

October 8th, 2004, 06:11 AM
|
Friend of Wrox
|
|
Join Date: Jan 2004
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
|
|
Think i'll have another crack tommorow, bit computered out now. I believe the answer does sit in the CSS area, perhaps I havnt explored all those options properly, yet...
Thanks for your time, much apreciated.
Wind is your friend
Matt
|

October 8th, 2004, 07:15 AM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
|
|
The solution is the ::before pseudo-element in CSS.
li::before {
content: "Chapter";
}
Of course IE does not support it, but it can with JavaScript or behaviors. For instance, the IE7 collection of scripts http://dean.edwards.name/IE7.
This does work in Gecko (Netscape, Mozilla, Mozilla Firefox), Opera and KHTML (Safari and Konqueror).
Regards,
Rich
--
[ http://www.smilingsouls.net]
[ http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
|

October 8th, 2004, 06:10 PM
|
Friend of Wrox
|
|
Join Date: Jan 2004
Posts: 1,870
Thanks: 12
Thanked 20 Times in 20 Posts
|
|
Wow, works for all except IE, this page is in a SOE IE 5.5
I got given it as a problem and was told the list tags were 'very prefered'. Something tells me this person should look at generating thier list some other way.
Thankyou Richard.York and PGTips for your time
Wind is your friend
Matt
|

October 8th, 2004, 06:29 PM
|
 |
Wrox Author
|
|
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts
|
|
> Wow, works for all except IE, this page is in a SOE IE 5.5
In that case you should look at IE7, http://dean.edwards.name/IE7. IE7 is a modularized collection of javascripts that implements W3 CSS standards in IE 5, 5.5, and 6. The scripts are pretty small and the end-user doesn't have to install anything. All you have to do is unzip the package in a directory called 'ie7' in the root of your website, then add a couple of lines to the markup.
You don't have to use all of the scripts in the package, you can just use the specific module that implements ::before and ::after, which is the CSS 2 module, I think. IE7 comes with a test suite and how-to, type in yourdomain.com/ie7 to access that after installing.
Also I'm using CSS 3 syntax there with the double colons '::'. I think IE7 supports that (I know IE itself does), but if it doesn't just use a single colon instead, e.g. :before.
HTH!
Regards,
Rich
--
[ http://www.smilingsouls.net]
[ http://pear.php.net/Mail_IMAP] A PHP/C-Client/PEAR solution for webmail
|

October 8th, 2004, 09:25 PM
|
Friend of Wrox
|
|
Join Date: Nov 2003
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
|
|
Quote:
quote:Also I'm using CSS 3 syntax there with the double colons '::'. I think IE7 supports that (I know IE itself does), but if it doesn't just use a single colon instead, e.g. :before.
|
I believe IE7 can use either syntax (I remember trying it before).
HTH!
-Snib <><
http://www.snibworks.com
There are only two stupid questions: the one you don't ask, and the one you ask more than once ;)
|
|
 |