Geek Answers Handbook

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

I am trying to create an ordered list in IE7, but for some reason does not work. Does anyone know why this could be? Update

The problem is that I do not see the number, thanks.

Thank.

eg.

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

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

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

thank

+5
source share
7 answers

SSCCE IE6 (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>

, </ol> <ol>. , - . " " . ? ? , SSCCE (, ) .

, , <li> HTML. XHTML, XHTML, MVC - XML HTML-.

: , , . -, margin of ol . . SSCCE. 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>

0. CSS reset. , .

+9

, IE7. :

<ol style="margin-left:25px;"> 
 <li>test1</li> 
 <li>test2</li> 
</ol>
+5

, , ol, .

ol {
    margin-left: 3em;
}

list-style: decimal;.

CSS, IE. 1 . ?

+3

, :

<ol>
 <li>blah</li>
 <li>ha</li>
</ol>
+2

, <li>:

<ol>
  <li>first thing</li>
  <li>second thing</li>
</ol>
+1

, , :

ol {list-style-position:inside;}
li {display:list-item;}

<ol>
   <li>foo</li>
   <li>bar</li>
</ol>

  • list-style-position: inside

    , ( )

  • display:list-item

    When the list items have either a width or a layout (? I forgot), IE7 is numbered and all list items are displayed as 1.; this fixes it.

+1
source

I also stumbled upon this old question. For me, the solution was to remove the float: the left declaration that I had on my ol-tag. Post it here if someone finds this helpful.

Sample code reproducing this IE7 behavior:

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

0
source

More articles:


All Articles