An IE/ordered list challenge

Published on Wednesday, October 19th, 2005

I came across a problem yesterday that I just couldn’t seem to solve, so I though it would be a challenge to you, my dear readers. The scenario is that I want to have an ordered list where the list items are floated. However, for some reason, IE refuses to show the numbers then.

When having such a list and the list items aren’t floated, the solution is to add padding to the ol element to see the numbers, but I don’t know how to solve it when I want them floated. I tried with position: relative, tricks like height: 1% to get the element to render correctly with the hasLayout problem etc, but it just doesn’t work!

The HTML code is extremely simple, so the problem doesn’t lie in there:


<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>

Any ideas?

Posted in CSS, Web browsers | 40 comments

40 comments

  • kemie
    October 19th, 2005 at 10:15

    If I’m not mistaken, when you float a list item, it changes it’s display from list-item to block, and therefore loses the bullet or number. Not sure if there is a workaround for this, though.

  • Robert Nyman - author
    October 19th, 2005 at 10:23

    kemie,

    One can set it to display: list-item to take care of that, but it still doesn’t help.

    Also, a more standards-compliant web browser, like Firefox, does show the numbering when the list items are floated.

  • Stuart Colville
    October 19th, 2005 at 11:20

    The one way I know to fix this is to use a wrapper div around the ol and apply the float to that instead of the ol.

  • Robert Nyman - author
    October 19th, 2005 at 11:31

    Stuart,

    That doesn’t apply to my problem. I want the list items floated next to each other, not the list itself.

  • Mats
    October 19th, 2005 at 12:19

    I’ve tried and can’t get it to work, although I discovered some strange behavior in FF when I tried to set style properties through JS.

    I named the OL “robert” … fyi. ;)
    document.getElementById("robert").style.display='list-item';
    doesn’t really do anything. But if I set: document.getElementById("robert").style.listStyle='outside';
    the OL turns into a UL which may be correct but it was a bit strange.
    IE still didn’t show any bullets or numbers though.
    Even though MSDN states:

    The listStyle property also applies to all elements on which the display property is set to list-item. To make the bullet points appear, you must explicitly set the margin property or set the listStylePosition property to inside on these elements.

    Sorry dude. No dice.

  • Mats
    October 19th, 2005 at 12:22

    More info if you didn’t know how much space is needed to show bullets:
    If the left margin of a list item is set to 0 using one of the margin properties, the list-item markers do not show. The margin should be set to a minimum of 30 points.

  • Jim
    October 19th, 2005 at 12:29

    One can set it to display: list-item to take care of that

    That’s not true. The spec states:

    The element generates a block box that is floated to the left.

    Looks like floating makes an element display: block whether you want it that way or not.

    Also, a more standards-compliant web browser, like Firefox, does show the numbering when the list items are floated.

    That’s not necessarily proof that you’re right though. Firefox is hardly perfect, and there have been (extremely) rare instances where Internet Explorer does the right thing and Firefox doesn’t. This appears to be one of them.

    Konqueror is more compliant than Firefox, and it doesn’t display the numbers. Neither does Opera 8.5. I’m going to have to conclude that it’s a Firefox bug. Can’t find anything in Bugzilla about it though.

    What a pain. I’d suggest posting to www-style to see if anybody there has any insight into the problem (and to moan!).

  • Robert Nyman - author
    October 19th, 2005 at 13:01

    Mats,

    Thank you for your tries!

    Jim,

    Looks like floating makes an element display: block whether you want it that way or not.

    Yes, it seems to do that and to take the upper hand.

    That’s not necessarily proof that you’re right though.

    Yep, you’re right. I only have access to a PC for the moment, so that was the most standards-compliant web browser I could think of. But after doing some testing in Opera 8, it turned out that it didn’t show the numbers either.

    Which leaves me wondering if it’s possible to show numbers at all for floated list items. I guess my solution will be to use an ol element for good semantics, and then write out the number value within each list item…

  • Jim
    October 19th, 2005 at 13:21

    I can’t think of a way of doing it. I would use a UL element rather than an OL element type if you’re going to put the numbers in the contents though; it degrades better in non-CSS situations (i.e. “* 1. Foo” is better than 1. 1. Foo”).

  • Robert Nyman - author
    October 19th, 2005 at 13:24

    Jim,

    Thinking about it, you’re right; then an ul is better. But it feels like the wrong choice semantically. :-(

  • Jim
    October 19th, 2005 at 13:28

    It is :(. Console yourself with the knowledge that even amongst the most rabid standards supporters, use of unordered list elements for ordered lists is common.

  • Robert Nyman - author
    October 19th, 2005 at 13:30

    Jim,

    I don’t care about being rabid, I just want the correct elements to work, damn it! :-)

  • Lars Gunther
    October 19th, 2005 at 13:36

    This makes for an interesting effect in FFox.

    li {
    border: 2px solid red;
    float: left;
    margin-left: 30px;
    display: list-item;
    list-style-position: inside;
    list-style-type: decimal; /* trying to force msie */
    padding-left: 4em;
    width: 7em;
    height: 1%;
    }

    It seems impossible to get the list to display on one line, when ‘list-style-position’ is ‘inside’. I fiddled with margins and paddings to no use. (I did this trying to force MSIE to show the number…)

  • Robert Nyman - author
    October 19th, 2005 at 13:45

    Lars,

    Thank you for trying!

    However, in Firefox the list items ended up in the same row for me with your code (I have version 1.0.7).

  • Stuart Colville
    October 20th, 2005 at 11:16

    I tried the same problem with a ul and used list-style-type: disc. As expected the bullets also dissappear in IE / Opera etc.

    I guess this just boils down to there being extremely limited browser support for rendering bullets and numbers in horizontal lists.

    Jim’s suggestion to use ul in this case is probably all you can do.

  • Robert Nyman - author
    October 20th, 2005 at 11:29

    Stuart,

    Yes, it seems you’re right. It just feels so frustrating when one wants to use the correct elements and behavior, but the web browser (or maybe some part in a specification?) holds you back.

  • Lars Gunther
    October 25th, 2005 at 13:50

    Yes Robert, one row, but (at least in my browser) not one line. Don’t know if one can reproduce the effect, but it’s like the width of the li-box does not get wider to accomodate the number, so it ends up on a line of it’s own above the text.

    I won’t investigate this any further, though.

    P.S. As a fellow Swede, may I ask you to contact me by mail in order to discuss the situation for standards and accessibility in our country? See http://www.webstandards.org/buzz/archive/2005_09.html#a000567
    and http://www.keryx.se/blogg-38

  • Robert Nyman - author
    October 25th, 2005 at 14:05

    Lars,

    Ah, interesting.
    I’ll send you an e-mail within a couple of minutes… :-)

  • Peter Uchytil
    January 5th, 2006 at 18:48

    Robert, I just encountered the same issue with flaoting lis. I did some more searching and ran across this article Creating Multicolumn lists. It gives a couple options for achieving the effect. To work with browsers other than Firefox requires extra markup. I don’t mind the markup, but these other methods require you to know the length of the list. I’m pulling info out of a database, so I was hoping to be able to use just straight lis and be done with it.

    Actually, I might do some page-load Javascript to rebuild a multi-column ul for browsers other than Firefox. That way I can keep my HTML code simple. If the user doesn’t have Javascript enabled, it won’t be the end of the world since I’m just trying to display bullets.

    Anyway, I thought you might want to check that article out if you haven’t already.

  • Peter Uchytil
    January 5th, 2006 at 18:49

    Grr. Messed up the link. It should have been:

    this.

  • Robert Nyman - author
    January 5th, 2006 at 20:51

    Peter,

    Thanks for the comment and for thinking of me!
    I fixed the link in your first comment, by the way.

    I think it depends on the usage. Knowing the number of items isn’t really a flexible solution and most lists in web sites are created from dynamic content.

    I think valid and lean HTML and JavaScript can be a valid solution if it has an acceptable fallback. It totally depends on how important the list is for the web site in question.

  • dexus
    March 30th, 2006 at 19:24

    I had this problem to.
    The way I fixed is was with a htc file.

    You just put this in your CSS:
    ol {
      behavior: url("ol.htc");
    }

    And you make a .htc file with this text inside:
    <attach event="ondocumentready" handler="RepairOlBug" />
    <script type="text/javascript">
      function RepairOlBug(){
        l = element.getElementsByTagName("li");
        for(c=0;c<l.length;c++) {
          l[c].value = c+1;
        }
      }
    </script>

    It’s not really a solution.
    It’s invalid CSS and it uses javascript.
    Hmm now I think of it, it’s a really sucky solution :D

    greets dexus

  • Robert Nyman - author
    March 31st, 2006 at 8:45

    dexus,

    Ha ha, thanks for the entertainment! :-)

    I don’t use htcs in my code (although the same behavior can easily be attached through regular JavaScript) and, like you say, I’m not sure it would be a good solution to the problem. Nevertheless, it was interesting to see your thinking!

  • HT
    August 15th, 2006 at 21:01

    my solution:

    .OrderedList
    {
    margin:0;
    padding:0;
    }

    .OrderedList LI
    {
    list-style-position: outside;
    margin-left:30px;
    }

    Works for IE7 beta3 and Firefox 2 beta1

  • Robert Nyman - author
    August 15th, 2006 at 21:07

    HT,

    Interesting. Have you tested in previous versions of IE and Firefox, and also in Opera and Safari?

  • Bart Noppen
    December 14th, 2006 at 0:33

    I ended up here via Google because I’m having the same problem with OL. Anyway I left them and switched to UL’s.

    About the dissapearing listbullets in UL’s.
    Set the UL to position: relative; and the bullets should re-appear.

  • alison
    February 12th, 2007 at 14:20

    I stumbled over this via google after banging my head against a wall for a few hours. But after reading the replies realised the best solution would be to remove all padding and margins from the , add left padding on the s, and then put the bullet point in as a no-repeat background image.

    Works a treat.

    (Wow, a live preview, how nifty!)

  • ethodaddy
    June 4th, 2007 at 13:38

    i had a similar problem and found that if i replaced the space with ascii character for space (& nbsp;) it worked. not an ideal solution I know but it worked for me…

  • Dan
    August 17th, 2007 at 19:47

    Stumbled here via google as well. Nice blog!

    Anyway, I’m having the same issue. The padding didn’t work. My list is already positioned relatively and like most others, I dont know the width of all my list items so a fixed background wont really do the trick…

    Guess it just can’t be done…

  • Dianna
    September 14th, 2007 at 22:34

    I just put the OL inside the DIV… kind of retarded, that’s IE for ya…

  • Mat Wright
    September 17th, 2007 at 12:39

    If the situation is desperate one could always use some css hacks to create the bullets in IE using background image:


    /*hack to get IE to display arrows in floated lists*/
    *:first-child+html ul{display:block;list-style:none;}
    * html ul{display:block;list-style:none;}

    *:first-child+html ul.fp_sectors li{background:url('/images/arrow.jpg') no-repeat left;padding-left:20px;}
    * html ul.fp_sectors li{;background:url('/images/arrow.jpg') no-repeat left;padding-left:20px;}

    /*hack to make list type image only show in non IE*/
    html>/**/body ul.fp_sectors{list-style-image: url('/images/arrow.jpg');}

    This is obvisouly a bit dirty but will work until we have a better solution !

    Mat Wright
    Broadshout‘

  • Hypnogogic - Links du jour
    November 30th, 2007 at 4:17

    [...] An IE/ordered list challenge - Robert?s talkI fuckin’ hate IE. [...]

  • Sv..
    March 27th, 2008 at 19:43

    Great going everybody,
    Here is a small work-around which has solved this problem.

    <LI> when floated, the list-item is considered as block in IE, and it converts the css value of “display” from “list-item” to “display:block”, and so is the reason it doesn’t show any numbers though it’s an ordered list.

    Now, this problem arises even when you define a width for the <LI> itself directly.

    So, the workaround is define the width for the “ul”, rather than “li”. The following is what i had used to solve this issue..


    ol {float: left;width: 500px;list-style: decimal outside;}
    li { margin-left: 30px; padding: 10px 0px;}

  • Praveen
    April 28th, 2008 at 16:38

    Hi,

    I am trying to display bullets in IE but it doesn’t seems to be working. I can’t control the outer div because they all are generated by random text.
    Is there any way i can just put some style to li and make it show up in IE.

    Thanks to all

  • Rene
    June 17th, 2008 at 21:03

    You can have floated ordered lists cross-browser, including IE 6, using pure CSS:

    CSS Code:
    #wrapper { width:300px; border:1px solid #ccc; padding:10px; }

    ul,ol,li {margin:0;padding:0;}
    ul,ol{list-style:none;}

    a:link,a:visited{text-decoration:none;color:#be7206;}
    a:hover{text-decoration:underline;color:#be7206;}
    ol:after, ul:after {
    content:”.”;
    display:block;
    font-size:0px;
    line-height:0px;
    height:0;
    clear:both;
    visibility:hidden;
    }

    ol, ul, .bd, {zoom:1;_height:1px;}

    .bd { padding:0; }

    /* ie hacks */
    #popsearch .bd {padding:0;_padding-left:0;}
    #popsearch ol{float:left;width:49.5%;list-style:decimal;}
    #popsearch li{font:normal 11px Verdana black;_font-size:75%;color:#333;margin-left:22px;*margin-left:2.9em;padding:3px 0;}
    #popsearch li a{position:relative;font:bold 92% verdana;left:-3px;*left:-7px;}

    HTML Code:

    <div id=”wrapper”>
    <div id=”popsearch” class=”bd”>
    <ol start=”1″>
    <li><a href=”#x”>Floated Item 1</a></li>
    <li><a href=”#x”>Floated Item 2</a></li>
    <li><a href=”#x”>Floated Item 3</a></li>
    <li><a href=”#x”>Floated Item 4</a></li>
    <li><a href=”#x”>Floated Item 5</a></li>
    </ol>

    <ol start=”6″>
    <li><a href=”#x”>Floated Item 6</a></li>
    <li><a href=”#x”>Floated Item 7</a></li>
    <li><a href=”#x”>Floated Item 8</a></li>
    <li><a href=”#x”>Floated Item 9</a></li>
    <li><a href=”#x”>Floated Item 10</a></li>
    </ol>
    </div><!– end #popsearch –>
    </div><!– end #wrapper –>

    Enjoy!!

  • Phil Sherry
    August 6th, 2008 at 15:53

    This bug annoys the shit out of me. Seriously.

  • Robert Nyman - author
    August 18th, 2008 at 22:50

    Phil,

    Good seeing you here!
    And, I’m sorry, it really sucks. :-)

  • johny why
    January 16th, 2009 at 9:13

    some pretty complicated work-arounds here! here’s a very simple method i used, in an OL, to get my number-indicators to float like drop-caps. it looks like this. as you can see, it works in chrome and firefox, but of course IE 8 chokes on it. the floats work, but the OL numbers don’t increment. i bet somebody here can fix that.

    keys to this method:
    –don’t put anything inside the LI’s. they are empty. all content goes after each closing LI.
    –float the surrounding div, not the LI.
    –the OL must specify decimal inside style.

    .dropli {
    float: left;
    width: .7em;
    font-size: 8em;
    line-height: 83%; }

    .dropcontent { margin-bottom:2em; }

    ol { list-style: decimal inside; }
    ………
    <ol>
    < div class=”dropli”><li ></li></div>< div class=”dropcontent”>orem ipsum dolor sit amet, consectetuer… </div>

  • Phil Sherry
    March 26th, 2009 at 17:23

    FIXED IN IE8.

  • Robert Nyman - author
    March 26th, 2009 at 21:31

    Phil,

    Good to hear! :-)

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview

Top results