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

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!!

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

<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;}



/*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;}

/*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‘

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…

Works a treat.

(Wow, a live preview, how nifty!)

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

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

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

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

Works for IE7 beta3 and Firefox 2 beta1

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!

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

greets dexus

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.

this.

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.

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