I wrote (as in handwritten) this a couple of weeks ago when I was having trouble sleeping, chances are you already know these things but, for the benefit of my rusty memory, I’ll still post it here. Besides, solving these problems took me hours of frustration, so I better chronicle it.

• There are times when list items occupy a huge space in IE even though you’re sure that you haven’t specified excessive paddings and margins to it. Setting the list item’s display value to inline-block will solve this (I’m a little surprised that IE 6 can interpret this value because I’ve always thought that it only knows block and inline, that’s how little I think of it).

  Inline doesn’t allow paddings and margins at the top and bottom area of the elements, however, it also means losing the width and layout of the element. In inline-block, we achieve just that, lose the excess top and bottom spaces while still being able to maintain the layout of the element. (That is, based on my understanding)

  And in some bizarre cases, inline will do and yes, it will still look like it’s a block item and will just take out the excess margin, weird, yes? I wish I have an explanation for this.

• There are numerous times and reasons why we want to set list-style to none. What sucks is that after you’ve turned off the list-style to the parent list item, you’d realize that you want the bullets to show in the children element.

  All hell breaks lose when no matter what head-banging you do, it just won’t show up. Thankfully, display: list-item is there to restore the bullets and is working in IE too!

• List items are supposed to line up neatly even when a float is used to an image before it. However, there are times when that’s not the case in, you guess it! IE 6. Standards-aware browsers will be solved by adding:

  
  { overflow:hidden; list-item-position:inside; }
  

  The result may be that the bullet may be a little too close to the text but at least it’s not below the list item just like in IE. The trick is to use display:inline-block too.

• Not all of the CSS problems are in IE. Sometimes the great Fx 2 has some quirks too. It usually happens in the useful, albeit a little used, autocomplete function. What usually happens is that the autocomplete items go under the div elements below it.

  Here’s what I usually do:

  HTMML

  
  <div class="parent_element">
    <div class="autocomplete">
      <ul>
        <li>Value here</li>
      </ul>
    </div>
  </div>
  

  CSS

  
  .parent_element { position:relative; z-index:99; overflow:visible; }
  

  What my understanding of this is that once the z-index is set, then it lifts the entire div and everything within it above every other element in the page therefore eliminating the problem.