An IE/ordered list challenge
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?
51 Comments
October 19th, 2005 at 12: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.
October 19th, 2005 at 12:23
kemie,
One can set it to <code>display: list-item</code> 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.
October 19th, 2005 at 13: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.
October 19th, 2005 at 13:31
Stuart,
That doesn't apply to my problem. I want the list items floated next to each other, not the list itself.
October 19th, 2005 at 14: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 <code>OL</code> "robert" … fyi.
<code>document.getElementById("robert").style.display='list-item';</code>
doesn't really do anything. But if I set: <code>document.getElementById("robert").style.listStyle='outside';</code>
the <code>OL</code> turns into a <code>UL</code> which may be correct but it was a bit strange.
IE still didn't show any bullets or numbers though.
Even though MSDN states:
<blockquote cite="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/liststyle.asp">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.
October 19th, 2005 at 14: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.
October 19th, 2005 at 14:29
That's not true. The spec states:
<blockquote cite="http://www.w3.org/TR/CSS21/visuren.html#float-position">
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.
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!).
October 19th, 2005 at 15:01
Mats,
Thank you for your tries!
Jim,
Yes, it seems to do that and to take the upper hand.
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 <code>ol</code> element for good semantics, and then write out the number value within each list item…
October 19th, 2005 at 15: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").
October 19th, 2005 at 15:24
Jim,
Thinking about it, you're right; then an <code>ul</code> is better. But it feels like the wrong choice semantically.
October 19th, 2005 at 15: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.
October 19th, 2005 at 15:30
Jim,
I don't care about being rabid, I just want the correct elements to work, damn it!
October 19th, 2005 at 15:36
This makes for an interesting effect in FFox.
<code>
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%;
}
</code>
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…)
October 19th, 2005 at 15: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).
October 20th, 2005 at 13: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.
October 20th, 2005 at 13: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.
October 25th, 2005 at 15: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….
and http://www.keryx.se/blogg-38
October 25th, 2005 at 16:05
Lars,
Ah, interesting.
I'll send you an e-mail within a couple of minutes…
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.
January 5th, 2006 at 20:49
Grr. Messed up the link. It should have been:
this.
January 5th, 2006 at 22: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.
March 30th, 2006 at 21:24
I had this problem to.
The way I fixed is was with a htc file.
You just put this in your CSS:
<code>ol {
behavior: url("ol.htc");
}</code>
And you make a .htc file with this text inside:
<code><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></code>
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
greets dexus
March 31st, 2006 at 10:45
dexus,
Ha ha, thanks for the entertainment!
I don't use <code>htc</code>s 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!
August 15th, 2006 at 23: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
August 15th, 2006 at 23:07
HT,
Interesting. Have you tested in previous versions of IE and Firefox, and also in Opera and Safari?
December 14th, 2006 at 2: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.
February 12th, 2007 at 16: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!)
June 4th, 2007 at 15: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…
August 17th, 2007 at 21: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…
September 15th, 2007 at 0:34
I just put the OL inside the DIV… kind of retarded, that's IE for ya…
September 17th, 2007 at 14:39
If the situation is desperate one could always use some css hacks to create the bullets in IE using background image:
<code>
/*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');}
</code>
This is obvisouly a bit dirty but will work until we have a better solution !
Mat Wright
<a>Broadshout'
November 30th, 2007 at 4:17
[...] An IE/ordered list challenge – Robert?s talkI fuckin’ hate IE. [...]
March 27th, 2008 at 21:43
Great going everybody,
Here is a small work-around which has solved this problem.
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 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..
<code>
ol {float: left;width: 500px;list-style: decimal outside;}
li { margin-left: 30px; padding: 10px 0px;}
</code>
April 28th, 2008 at 18: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
June 17th, 2008 at 23: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">
Floated Item 1
Floated Item 2
Floated Item 3
Floated Item 4
Floated Item 5
<ol start="6">
Floated Item 6
Floated Item 7
Floated Item 8
Floated Item 9
Floated Item 10
</div><!– end #popsearch –>
</div><!– end #wrapper –>
Enjoy!!
August 6th, 2008 at 17:53
This bug annoys the shit out of me. Seriously.
August 19th, 2008 at 0:50
Phil,
Good seeing you here!
And, I'm sorry, it really sucks.
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>
March 26th, 2009 at 19:23
FIXED IN IE8.
March 26th, 2009 at 23:31
Phil,
Good to hear!
October 28th, 2009 at 22:47
I am also having the same problem with this issue.
After reading almost all of the comments here and trying to figure out how to go about it. I come out with a solution "I think… well just for what i need".
ol { float: left; width: 300px; position: relative; left: -45px; }
ol li { margin-left: 30px; padding: 0; }
I used position relative with a left value of -45px just for it to align in the paragraph before the list.
Hello people!
October 29th, 2009 at 14:02
Lawrence,
Interesting! I'll look into that later on to see if it works for my needs.
February 2nd, 2010 at 8:24
It's not fixed in IE8, contrary to what Phil says. Not at all.
My sidebar's image list bullets are "winking" on and off- it's extremely weird – in IE6, IE7 and IE8 (I'm hiding them in IE6 over transparency issues, don't care about IE5).
I've been googling for a while on this and read a dozen articles with a dozen "fixes"; the only thing I'm floating that would directly affect the lists is the enclosing sidebar, and the "fixes" consistently don't work across the board, so I don't know which one to try, and I don't want to spend hours finding out.
I'm already using positioniseverything.com's float-clearing CSS, so my problem is I'm not sure, since I stripped out a little of the original style sheet's (and LJ's HTML) code to put my own lists in, what I need to add back in (something that "fixed" those bullets into place was in the original HTML or in the CSS – but I'm not sure which) to make IE stop making my bullets "wink" and off.
They not only "wink", but one image bullet is missing altogether, another link has no image bullet sometimes and has it other times but the link next to it is *always* red even though it should be brown like the others, and let's see…one bullet displays "above" its link, not next to it….yeah, I'm having this many problems with just one sidebar list, just in IE, with what's between just one set of list tags. I am, as always when I'm dealing with IE, stupefied by just how amazing(ly bad) it is.
February 2nd, 2010 at 11:03
Marah Marie,
I agree, it's incredible how buggy the implementations are.
March 16th, 2010 at 21:34
[...] site news. Leave a Comment Not to sound defensive (I think I do, regardless), but I realize that owing to the custom sidebar I created for this blog last week, the blog has looked like a pile of cr… ever [...]
March 18th, 2010 at 12:03
I found this bug very interesting and frustrating at the same time.
I found that I was triggering the bug with another IE bug fix in my IE conditional CSS.
I had:
<code>
/* IE/Win Disappearing List-Background Bug */
li {
zoom: 1;
}
</code>
And changed it to:
<code>
/* IE/Win Disappearing List-Background Bug */
ul li {
zoom: 1;
}
</code>
My advice to anybody else having this problem is to be careful when styling your lists and try to style <code>ol, ol li</code> as little as possible.
If you trigger ordered lists to become a block level element or hasLayout or set a width or float them you going to start running into problems with IE.
March 18th, 2010 at 12:14
Justin,
Right, it's a can of worms. Thanks for the tip!
March 20th, 2010 at 3:53
Thanks….everyone.
Not really relevant to the original problem..:
While reading all comments I got an idea for my problem from #41.
list-style-position:inside;
Thanks: Lawrence Dionisio
February 16th, 2011 at 5:22
add padding-left: 60px; to ol may work
July 22nd, 2011 at 18:36
Check this solution – http://klalex.com/2011/06/broken-ordered-list-in-ie9/
July 25th, 2011 at 13:48
Thanks for the tips, guys!
Write a comment