OL Tag not displaying #

HTML & CSS
1

Hello all,
I am just about to go out of mind…

I’ve been trying to add an ol tag to my site so that I don’t have to manually add each number to a list, and so that if I ever want to add something later it will automatically change the number sequence after inserting a new item into the html page.

Problem: Not showing numbers.

When previewing in Dreamweaver, it show just fine.

After uploading to the host, not showing the numbers.

<ol start="50">
	<li>Item in list</li>
	<li>Item in list</li>
</ol>

I did not post any css here because everything I’ve tried did not work. Including "padding / spacing / widths / blank spaces before the inserted html text.

I have read many posts across the net and tried multiple ways to fix it without prevail.

Any suggestions?

2

Well if using just that HTML in a page, with no CSS it is appearing the numbers.

So possibly, here are the options that are making this not appear.

Do you have a reset which kills margins and paddings on the page? Or just one for the <ol>? If so then that could be the cause. It needs margins/paddings (different in each browser) to display the nubmber. Make sure there is about 1em or so. (Of margin or padding, doesn’t matter)

Do you set list-style-type:none;? Or any variation of that?

3

Hi.

Aside what RyanReese said-

The ‘start’ parameter has been depreciated, unfortunately (at least, I think so, since it makes no sense). There is another option you should read about - I don’t have too much time right now, so I can’t write the whole thing out for you, but read about the counter-reset css property. That should fix you up.

4

That isn’t supported in a wide variety of browsers, at least the deprecated start attribute is supported widely.

5

[FONT=“Book Antiqua”]nod Bit of an overstatement about it not being supported in a ‘wide variety’, but I do understand your point.

Just laying out another option. =][/FONT]

6

Yes. Post a link to your site. Both the start attribute on the ol, and the value attribute on the list item work across the board. IE and Opera are buggy under certain circumstances. There is a caveat, though. If you’ve created a new block formatting context on the item, or triggered hasLayout (in IE), the marker will either not show, or in IE<8’s case be locked to “1”.

Let’s see the actual page, and we can figure out what’s causing the side effect.

cheers,

gary

7

I tried to post the code but apparently it will not accept it due to the links. Here is a inserted link to the page that way you can view the source.

http : // lyricslocker . info / pages / a . php

Had to post it that way due to newbie restrictions :confused:

8

Hi, on ol{} you change the display type to inline, thus changing it from “list-item”

You need to remove the display:inline;

9

I’m not understanding what you meant. Please excuse my dumbness but as I stated in a previous post.. my brain is basically scrambled from trying to figure it out. Sorry.

10

Look in your CSS file. Look for “ol”

Now look for wehn the selector is just ol{} (stuff will be inside it though)

You set display:inline;. Aw heck I’ll just look in there.

Ok, on this page
http://lyricslocker.info/pages/style.css

You set ol to display:innline;. Remove it.

11

The OL may be inline; it’s the LIs that cannot be inline and still have list markers. Under the ol {…} add this:

ol li {
  list-style-type: decimal;
  display: list-item;
  }

Both properties are required because of the more generic li {list-style: none; display: inline;} used for the top alphabet list.

cheers,

gary

12

That did it Gary, Thanks so much!!