Right, it’s a can of worms. Thanks for the tip!

I found that I was triggering the bug with another IE bug fix in my IE conditional CSS.

I had:

/* IE/Win Disappearing List-Background Bug */
li {
zoom: 1;
}

And changed it to:

/* IE/Win Disappearing List-Background Bug */
ul li {
zoom: 1;
}


My advice to anybody else having this problem is to be careful when styling your lists and try to style ol, ol li 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.

I agree, it’s incredible how buggy the implementations are.

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.

Interesting! I’ll look into that later on to see if it works for my needs.

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!

Good to hear!

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>

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…