# IE and Ordered Lists Bug -- Why can't IE count?

**URL:** <https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097>\
**Category:** Uncategorized\
**Created:** [May 12, 2008, 4:26pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097 "2008-05-12T16:26:08Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 12, 2008, 4:26pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/1 "2008-05-12T16:26:08Z")

</div>

Ok, i’ve encountered this problem before, but never really had to do anything about it… mostly because the bug itself was pertaining to an unordered list, which I was able to remedy by removing any list-style and using a background image for my bullets.

ANYWAYS.

My problem today is with an **ordered** list,

Why does IE see fit to not increment the number values with each list item?

and why does it drop the list-number down to the bottom line of each list item?

I’ve done a lot of googling on this subject, and all of the answers I’ve come across tell me to remove any width declaration, and this would fix the problem.

However, I do not have any width definitions set up for my ordered list, and the bug persists.

Perhaps its because I have a nested unordered list within my ordered list?

Here is my code:

```auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
</head>
<body>
<div class="container">
<div class="meat">
        <ol type="1">
            <li>First item.</li>
            <li>Second item.</li>
            <li>Third item.</li>
            <li>Fourth item.</li>
            <li>Fifth item.
                <ul>
                    <li>This is a nested unordered list item.</li>
                    <li>This is a nested unordered list item. </li>
                </ul>
            </li>
        </ol>
</div>
</div>
</body>
</html>

```

Here is my CSS:

```auto

.container .meat ol
    {
        margin: 0;
        padding: 10px 0 0 20px;
    }

.container .meat ol li
    {
        padding: 5px 0 3px 0;
    }

.container .meat ol li ul
    {
        padding: 0;
        margin: 0;
        list-style: none;
    }

.container .meat ol li ul li
    {
        padding-left: 10px;
        background: url(/help/blue_bullet.gif) no-repeat left center;
    }

```

[COLOR=Red]\*\*Attached is a screen shot of IE and its stupidity

\*\*[/COLOR]  
Can anyone offer up any suggestions to remedy this?

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [May 12, 2008, 4:40pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/2 "2008-05-12T16:40:52Z")

</div>

I’m at work on a mac so I can’t check in IE7 right now, however just looking at your code I noticed something.

If I’m not mistaken, _type=“1”_ is deprecated. And I’m assuming that the _type_ attribute was used to determine the way the list is numbered. So, what you might want to try instead is getting rid of the _type_ attribute and trying something like this…

```auto

.container .meat ol
    {
        margin: 0;
        padding: 10px 0 0 20px;
        **[COLOR="Red"]list-style-type: decimal;[/COLOR]**
    }

```

Hope this helps a bit! 😃

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 12, 2008, 4:46pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/3 "2008-05-12T16:46:50Z")

</div>

Fair enough,

I switched it up, and IE is still failing grade 1 math.

IE6 btw, no idea whats going on with it in IE7 yet

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [May 12, 2008, 6:05pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/4 "2008-05-12T18:05:55Z")

</div>

Hmm, one more quick thought would be to declare the _li’s_ as list-items like so…

```auto

.container .meat ol li
    {
        **[COLOR="Red"]display: list-item;[/COLOR]**
        padding: 5px 0 3px 0;
    }

```

Maybe? But that’s really all that I can see from the code. :stare:

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [May 12, 2008, 6:37pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/5 "2008-05-12T18:37:30Z")

</div>

do you have some sort of reset code that may be conflicting with your ols ?

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 12, 2008, 6:41pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/6 "2008-05-12T18:41:13Z")

</div>

Negative, in fact one of the proposed remedies that I found through google was to _include_ a reset, but that did nothing except remove some margins ☹

My search continues?

@redelite: no luck, still displaying everything as 1.

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [May 12, 2008, 6:53pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/7 "2008-05-12T18:53:05Z")

</div>

Dunno man it should work. I don’t see anything wrong w/ it. I copied and pasted exactly what you had w/ the exception of not using type = 1 (did it w/ css) and it worked fine

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 12, 2008, 7:03pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/8 "2008-05-12T19:03:34Z")

</div>

Ok so I’ve added both of redelite’s suggestions (i only did one at a time before :S ) and it seems to work:

```auto

.container .meat ol
    {
[COLOR=Red] list-style-type: decimal;[/COLOR]
    }
.container .meat ol li
    {
[COLOR=Red] display: list-item;[/COLOR]
    }

```

However this has been applied to an un-styled ordered list, so hopefully once I drop in my styling to this it will continue to work, I’ll let you know

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [May 12, 2008, 7:12pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/9 "2008-05-12T19:12:12Z")

</div>

_cross’s fingers_

That is quite an interesting bug. I’ve been reading a bit about it since I last posted to you. And from what I have gathered, a lot of people are saying that the _width: xx;_ is what primarily breaks it. However, I found multiple sites that do suggest that _display: list-item;_ will solve the problem. So hopefully it works!

The only problem I can see now is, I wonder if with it being _display: list-item;_, if you will be able to declare a width and height, or if it will just act like _display: inline;_

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 12, 2008, 7:13pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/10 "2008-05-12T19:13:01Z")

</div>

Ok, half way there, now the only problem that remains is the fact that all the numbers are being aligned to the bottom.

New CSS thus far (in blue):

```auto

[COLOR=RoyalBlue].container .meat ol
    {
        margin: 0;
        padding: 10px 0 0 20px;
        list-style-type: decimal;
    }

* html .container .meat ol /* resetting these makes the first item (#1) appear again, but completely zero-ing them out doesnt fix the bottom alignment */
    {
        margin: 0;
        padding: 0 0 0 20px;
    }

.container .meat ol li
    {
        padding: 5px 0 3px 0;
        display: list-item;
    }
[/COLOR]
.container .meat ol li span
    {
        font-weight: bold;
        padding-right: 5px;
    }

.container .meat ol li ul
    {
        padding: 0 0 0 20px;
        margin: 0;
        list-style: none;
    }

.container .meat ol li ul li
    {
        padding-left: 10px;
        background: url(/help/blue_bullet.gif) no-repeat left center;
        border: none;
    }

```

[COLOR=Red]  
Screenshot Attached[/COLOR]

---

<div class="post-metadata">

**Author:** ![Syous](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@Syous](https://forum.kirupa.com/u/Syous)\
**Post date:** [May 12, 2008, 7:24pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/11 "2008-05-12T19:24:20Z")

</div>

Threads like this make me just that more impatient for IE8. I downloaded the beta and on the site I tested it loaded just as fast as firefox and all the CSS was just fine.

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 12, 2008, 7:24pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/12 "2008-05-12T19:24:41Z")

</div>

[quote=redelite;2325191]  
The only problem I can see now is, I wonder if with it being _display: list-item;_, if you will be able to declare a width and height, or if it will just act like _display: inline;_[/quote]

I’ve tried it out, and it seems to be similar to display:block; in that, height and width are accepted, but the numbers are still overweight and lazy, and won’t align to the top of the list-item.

defining a height for the list item or the list is sub-optimal, as this ordered list will be used on more than one page, for more than one purpose

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 12, 2008, 7:33pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/13 "2008-05-12T19:33:57Z")

</div>

SUCCESS!!!

I just defined vertical-align: top; and then switched my padding settings for margin

```auto

.container .meat ol
	{
		margin: 0;
		padding: 10px 0 0 20px;
		list-style-type:	decimal;
	}

* html .container .meat ol
	{
		margin: 0;
		padding: 0 0 0 20px;
	}

.container .meat ol li
	{
		padding: 5px 0 3px 0;
		display: list-item;
	}

* html .container .meat ol li
	{
		padding: 0;
[COLOR="Red"]** margin: 5px 0 3px 0;
		vertical-align: top;**[/COLOR]
	}

```

---

<div class="post-metadata">

**Author:** ![redelite](https://avatars.discourse-cdn.com/v4/letter/r/dc4da7/32.png) [@redelite](https://forum.kirupa.com/u/redelite)\
**Post date:** [May 12, 2008, 7:41pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/14 "2008-05-12T19:41:40Z")

</div>

Eh, :sigh: beat me to it… Nice though! Pretty ugly bug if you ask me.

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 12, 2008, 8:04pm UTC](https://forum.kirupa.com/t/ie-and-ordered-lists-bug-why-cant-ie-count/260097/15 "2008-05-12T20:04:16Z")

</div>

Hah, yea, agreed, you have to pretty much punch IE in the face until it displays them how it should on default…

Anyways, thanks for all the help lads 🙂