Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ordered list does not work on IE7 (<ol><li)

I am trying to create an ordered list on IE7 but for some reason does not work. Does anybody knows why this can be? Update

The issue is that I cant see the numbers, thanks.

Thanks.

eg.

<ol>
 <li></li>
 <li><li>
</ol>

Update As an example I saw this page where if you look at it on IE7 you wont see de numbers, but if you look at it on any other (but not ie) you will see the numbers.

http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html

Thanks

like image 829
Amra Avatar asked Mar 08 '10 13:03

Amra


People also ask

How does an ordered list work?

An ordered list uses numbers or some sort of notation that indicates a series of items. For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.

What is an ordered list explain ol tag with attributes?

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. The <li> tag is used to define each list item. Tip: Use CSS to style lists. Tip: For unordered list, use the <ul> tag.

How do I make an ordered list?

You can create an ordered list using the <ol></ol> tag and, define the list items using <li></li>. type="1"− This creates a numbered list starting from 1. type="A"− This creates a list numbered with uppercase letters starting from A. type="a"− This creates a list numbered with lowercase letters starting from a.


2 Answers

This SSCCE works fine in all browsers from IE6 and up (IE6/7/8, FF2/3, Safari3, Chrome4, Opera9).

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2401705</title>
    </head>
    <body>
        <ol>
            <li>Item 1
            <li>Item 2
        </ol>
    </body>
</html>

It even works when I tried to replace the </ol> by the syntactically invalid <ol>. So, your problem lies somewhere else. You really need to elaborate the "Doesn't work" in more detail. What exactly happens? What exactly happens not? Preferably edit your question to include an SSCCE (like above) and try to ask the question the smart way.

Note, in contrary to what others say, a non-closing <li> is syntactically valid in normal HTML. It's indeed invalid in XHTML, but I don't see any reason to use XHTML unless you're using a component based MVC framework or some other XML based tool to generate HTML pages.

Update: you thus don't see the numbers. Apparently you've set the margin of the ol to zero. This way they will get out of the view. The following SSCCE demonstrates it. It indeed fails in IE6/7.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2401705 - IE6/7 problem</title>
        <style>ol { margin: 0; }</style>
    </head>
    <body>
        <ol>
            <li>Item 1
            <li>Item 2
        </ol>
    </body>
</html>

Don't set the margin to 0. This may also be caused by a so-called CSS reset sheet. Don't use them, just remember to specify the margins for all block elements yourself.

like image 180
BalusC Avatar answered Oct 12 '22 19:10

BalusC


You may also have to give your ordered list a margin-left to see the numbers in IE7. Try this:

<ol style="margin-left:25px;"> 
 <li>test1</li> 
 <li>test2</li> 
</ol>
like image 41
Jon Avatar answered Oct 12 '22 19:10

Jon