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?
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.
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.
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.
Stuart,
That doesn't apply to my problem. I want the list items floated next to each other, not the list itself.
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.
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.
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!).
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…
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").
Jim,
Thinking about it, you're right; then an <code>ul</code> is better. But it feels like the wrong choice semantically. 🙁
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.
Jim,
I don't care about being rabid, I just want the correct elements to work, damn it! 🙂
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…)
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).
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.
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.
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
Lars,
Ah, interesting.
I'll send you an e-mail within a couple of minutes… 🙂
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.
Grr. Messed up the link. It should have been:
this.
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.
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
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!
my solution:
.OrderedList
{
margin:0;
padding:0;
}
.OrderedList LI
{
list-style-position: outside;
margin-left:30px;
}
Works for IE7 beta3 and Firefox 2 beta1
HT,
Interesting. Have you tested in previous versions of IE and Firefox, and also in Opera and Safari?
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.
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!)
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…
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…
I just put the OL inside the DIV… kind of retarded, that's IE for ya…
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'
[…] An IE/ordered list challenge – Robert?s talkI fuckin’ hate IE. […]
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>
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
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!!
This bug annoys the shit out of me. Seriously.
Phil,
Good seeing you here!
And, I'm sorry, it really sucks. 🙂
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>
FIXED IN IE8.
Phil,
Good to hear! 🙂
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!
Lawrence,
Interesting! I'll look into that later on to see if it works for my needs.
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.
Marah Marie,
I agree, it's incredible how buggy the implementations are.
[…] 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 […]
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.
Justin,
Right, it's a can of worms. Thanks for the tip!
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
add padding-left: 60px; to ol may work
Check this solution – http://klalex.com/2011/06/broken-ordered-list-in-ie9/
Thanks for the tips, guys!
Guys,
Had the same issue:
tag with nested in it.
I then just nested the in some tags and bobs ur uncle.
Numbers show again…:P