Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using counter-reset

Status
Not open for further replies.
Gazzieh

Gazzieh

IS-IT--Management
Dec 18, 2006
117
GB
I have a 3-column list and want the second and third lists to continue from the previous list. The HTML side reads as follows:

Code: 
<div class="column1">
<ol style="padding-left: 0; list-style-position: inside;">
<li>Track 1</li>
<li>Track 2</li>
<li>Track 3</li>
<li>Track 4</li>
<li>Track 5</li>
<li>Track 6</li>
<li>Track 7</li>
<li>Track 8</li>
</ol>
</div>
<div class="column1">
<ol style="padding-left: 0; list-style-position: inside;">
<li>Track 9</li>
<li>Track 10</li>
<li>Track 11</li>
<li>Track 12</li>
<li>Track 13</li>
<li>Track 14</li>
<li>Track 15</li>
<li>Track 16</li>
</ol>
</div>
<div class="column1">
<ol style="padding-left: 0; list-style-position: inside;">
<li>Track 17</li>
<li>Track 18</li>
<li>Track 19</li>
<li>Track 20</li>
<li>Track 21</li>
<li>Track 22</li>
<li>Track 23</li>
<li>Track 24</li>					</ol>

I know of the counter-reset option but cannot appear to get this to work. All examples I can source do not deal with this concept.

Anyone able to help? Please?
 
Sort by date Sort by votes
Don't worry.

Firstly, counter-reset is not supported by IE (wow, what a surprise), nor Mozilla browsers.

And I have solved it by wrapping the 3 divs in a single <ol></ol>.
 
Upvote 0 Downvote
I know this is not supported in IE6 or 7 - they are working on implementing it in IE8.

It is supported in Opera. See sitepoint's counter-reset compatability.


Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Just in feedback to the last comment. I wasn't sure and so have just run a validation on the code. Everything is validated!
 
Upvote 0 Downvote
Then there's something we're not getting, for having divs inside ol (as a child, not descendant) is not valid. Unfortunately I have no idea how to tackle your problem, so I would be very happy if you found a valid solution.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
I wasn't sure and so have just run a validation on the code. Everything is validated!
Click to expand...

Perhaps you're using a poor validator? Perhaps you have no DOCTYPE? It should NOT validate. Try validating the following code using this site:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
	<div>
		<ol>
			<div>
				<li>Some item</li>
			</div>
			<div>
				<li>Another item</li>
			</div>
		</ol>
	</div>
</body>
</html>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
My first response was 'cheeky b***er', I only user the W3C validator! And my Doctype is perfectly fine.

Then I realised my error; I was validating the wrong code.

Anyhow, everything works fine in Firefox, Safari and Flock.

The numbers do not work in Opera.

IE7/8 does not work at all and in fact there are a number of issues I have to sort out for IE (typical).

There doesn't seem to be an all round fix but I will keep trying.

Thanks anyway guys.
 
Upvote 0 Downvote
Oh - I should have mentioned this a few posts back, but it completely escaped me...

I've found that in IE6, floating LIs causes the bullets (or numbers) to disappear most of the time, and I don't recall ever having found a way around this.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
One way to do it would be to use the [tt]start[/tt] attribute of the second and subsequent <ol>s:
Code: 
<div class="column1">
<ol style="padding-left: 0; list-style-position: inside;">
<li>Track 1</li>
<li>Track 2</li>
<li>Track 3</li>
<li>Track 4</li>
<li>Track 5</li>
<li>Track 6</li>
<li>Track 7</li>
<li>Track 8</li>
</ol>
</div>
<div class="column1">
<ol [red]start="9"[/red] style="padding-left: 0; list-style-position: inside;">
<li>Track 9</li>
<li>Track 10</li>
<li>Track 11</li>
<li>Track 12</li>
<li>Track 13</li>
<li>Track 14</li>
<li>Track 15</li>
<li>Track 16</li>
</ol>
</div>
The start attribute is deprecated (don't ask me why, as there's no CSS equivalent AFAIK), but it's still valid and should work on all browsers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
I did want to avoid deprecated code but you are correct; if there is nothing better then I have no choice.

luckily my doctype is transitional so it should be forgiving. :eek:)

Thanks everyone!
 
Upvote 0 Downvote
Thanks ChrisHunt and BillyRayPreacherSon for the link. The methods given are fine, with the second one using the START method from ChrisHunt (and the one I am going to go with).

The third uses CSS that is not fully supported and so I have to accept deprecated code instead. Oh well! :eek:)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
304
198709km
198709km
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
122
caykamanj1966
caykamanj1966
LyndonOHRC
  • Locked
  • Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
257
vacunita
vacunita
pendle666
  • Locked
  • Question
Using CSS for the pre tag. white-space: pre-line not working in Chrome
Replies
4
Views
346
pendle666
pendle666
ggriffit
  • Locked
  • Question
Adding a CSS attribute overlay using ::after 1
Replies
8
Views
154
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top