display 1,1,1,1 rather than 1,2,3,4 in IE (tried list-item)

Question

I have an ordered list inside which any version of Internet Explorer is picking up as 1,1,1,1 rather than 1,2,3,4. After reading up on this it would appear this happens because there is a width set on the li and you need to add 'display: list-item;' to the li for it to work - which I have tried with no result, I have also tried removing the width altogether with the same problem.

Heres my list:

<div id="nav">
<ul>
    <li><a href="/">Home</a></li>
    <li>
        <a href="#">New Products</a>
        <ol class="newProducts">
            <li><a href="#"><span>Link 1</span></a></li>
            <li><a href="#"><span>Link 2</span></a></li>
            <li><a href="#"><span>Link 3</span></a></li>
            <li><a href="#"><span>Link 4</span></a></li>
            <li><a href="#"><span>Link 5</span></a></li>
            <li><a href="#"><span>Link 6</span></a></li>
            <li><a href="#"><span>Link 7</span></a></li>
            <li><a href="#"><span>Link 8</span></a></li>
        </ol>
    </li>
    <li><a href="news.html">News</a></li>
    <li><a href="payment-and-shipping.html">Payment &amp; Shipping</a></li>
</ul></div>

Heres my CSS:

<pre>
#nav ul, #nav ol {
position: absolute;
top: 158px;
    left: 0px;
    list-style: none;
    text-transform: uppercase;
}

#nav ul > li {
    float: left;
    padding: 10px;
    border-right: 2px solid #000000;
    font-size: 16px;
    position: relative;
}    

#nav ul > li:hover {
    background: url(../images/headerHover.png) bottom no-repeat;
    padding-bottom: 10px;
}    

#nav ul > li a {
    color: #FFFFFF; 
}

#nav ul > li > ol {
    display: none;
}

#nav ul > li:hover ol {
    margin-top: -120px;
    left: 0px;
    display: block;
    padding-top: 7px;
    list-style: decimal outside;
    font-size: 10px;
    color: #fdc800;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    text-transform: none;
}    

#nav ul > li:hover ol > li {
    text-align: left;
    padding: 0px 0px 5px 0px;
    width: 240px;
    border: 0px;
}    

#nav ul > li:hover ol > li:hover {
    background: none;   
}

#nav ul > li:hover ol > li a {
    color: #FFFFFF;
    text-decoration: none;
}    
</pre>

Which IE? Seems to work fine in IE9: http://jsfiddle.net/ETrhn/4 — isherwood, Jan 24 '13 at 20:30
hmmm really weird that works ON THE FIRST HOVER, if I move off that and hover back over it is 2,2,2,2. I am using IE9 but same on 8 too. — bigdaveygeorge, Jan 24 '13 at 21:23
I'm still not seeing that. Maybe try a different pc to make sure it's not a fluke. UPDATE: I do see it in IE8. — isherwood, Jan 24 '13 at 21:28
Seems that this is a known issue: http://stackoverflow.com/questions/5584500/ordered-list-showing-all-zeros-in-ie9 — isherwood, Jan 24 '13 at 21:41
The empty div does not work, i'm quite rusty with jQuery to try the other at the moment — bigdaveygeorge, Jan 24 '13 at 21:50
That's a real bear. You might have to number your items manually or use jQuery to either trigger the menu dropdown or add the index numbers. — isherwood, Jan 24 '13 at 22:16
Can anyone recommend the jQuery code to use to get this working? — bigdaveygeorge, Jan 26 '13 at 12:36

score 0 · Answer 1 · answered Apr 29 '21 at 18:48

This is how I interpret your issues:

You do NOT want a bulleted or numbered list when you change your list into a top-level navigation using your CSS. Your specific issue is the ordered list not showing numbers (just 1 or none) in IE, however, when the user clicks the navigation to expand it.
When your CSS fails in some older IE browsers (like IE5), you DO want the list to return back to a numbered vertical list, as well. Currently, it does not show list numbers in IE5.

Is that correct?

First, to achieve this, you have to remove "list-style:none" from your CSS which destroys the <ul> and <ol> list items. They no longer perform as ordered or unordered lists using that CSS declaration. That is what removed the "numbers" from the list shown in all IE browsers. The numbers will now appear as will the bullets by removing that property.

Second, IE5 and older browsers do NOT know what child selectors are (ul > li) so you can safely use that CSS rule to hide the bullets and numbers from IE6 or greater browsers and let IE5 or older return to an ordered list format showing its 1., 2., 3. etc numbers as normal. So to fix this, make the changes shown below:

<style>
#nav ul, #nav ol {
  /* Hide this and let your lists return to being lists again */
  /*list-style: none;*/
}

#nav ul > li {
  /* Now hide the numbers and bullets from IE6 or greater which are able to be a navigation banner and do not need to shows list numbers or bullets */
  list-style-type: none;
}
</style>

display 1,1,1,1 rather than 1,2,3,4 in IE (tried list-item)

1 Answers1