Mad IE disappearing list items CSS bug

by oneafrikan on August 7, 2006

I’m working on the frontend for a CMS based intranet at a client, and I’ve been getting the disappearing list item madness again – where the list items are rendered to the page when it is loaded, but when you scroll up or down the page, the list items disappear. Go to another window, or refresh the screen, and they’re back again…

So it’s pretty weird, and after spending about 30mins looking for a solution somewhere I decided to do a complete CSS debug to see if I could weed the problem out… but no can do.

One of the hassles has been that I’m working with user generated code (Can I get that turned into a buzzword please?), so I can’t really change or improve the markup as much as I’d like to – so it’s back to basics, where I basically ended up chucking out the usual list item styling in favour of a background image, which has had far more predictable results, and now that I’ve implemented across all the list item styling, it doesn’t make the site look any the worse.

More to the point, the site actually looks pretty much the same in IE and FF (which for me more than the client is satisfaction, since they only use IE).

Ok, so if you have the problem, then here’s the process I went through:

  1. Adding 100% width didn’t help me since I’m using floated divs and they’re arranged neatly as fluid boxes.
  2. Margins and padding didn’t really do much, and we all know that the effect is different on both platforms anyways…
  3. Position: relative; didn’t really help either.

And this is the CSS that works for me now:

/* unordered list styling ____________________________*/
ul {
list-style-type: none;

font-size: 1em;
line-height: 1.2em;

padding: 0 0 10px 0;
margin: 10px 0 0 0px;
ul li {
list-style-type: none;

background-image: url(../layoutImages/images/lists_bullet.gif);
background-repeat: no-repeat;
background-position: 0 5px;

padding: 0 0 0 20px;
margin: 0 0 0 0px;
ul li a,
ul li a:link,
ul li a:visited{
text-decoration: none;
color: #017BB4;
ul li a:hover,
ul li a:active {
text-decoration: underline;
/* main-sub-block styling ____________________________*/
div.main-sub-block ul {
padding: 0 0 0 0;
margin: 0 0 0 0px;
div.main-sub-block ul li {

/* main-sub-block styling ____________________________*/

Hope that helps some ;-)


PS – WeaverSlave is a pretty tight text editor too – started working with it today… Give it a whirl if you’re looking for a new editor ;-)

by Gareth Knight on August 7, 2006 at 4:54 pm. Reply #

Yeah, I had the same thing, happen to me, last two days ago,,, is it because of nested lists? say ul > ol or vice-versa? I had to remove that,,,

oh yeah,, user generated code (ugc),,, yeah,,, i agree

by lebogang nkoane on August 7, 2006 at 7:37 pm. Reply #

Nope, wasn’t nested lists. The lists were nested inside a P element however, so that may have something to do with it… (don’t ask why ;-)

and yea, if it can break, the user will break it!

by Gareth Knight on August 7, 2006 at 9:37 pm. Reply #

Leave your comment


Required. Not published.

If you have one.

Protected with IP Blacklist CloudIP Blacklist Cloud