You are here

YAML, jQuery slideToggle and IE6

As usual with browser bugs and hacks this took me a while to find out.

I have an unordered list with complex items like floats and stuff. This list is supposed to hide when I click on a button by slowly decreasing its height. I use jQuery's slideToggle for that.

Problem: In Internet Explorer 6 the content (or parts of it) is hidden after the list is shown (slid down).

The only thing I found was a blog post saying you shouldn't use any positioning there. I didn't. Well, I thought I didn't…

For this project I use YAML, a CSS framework and YAML sets all lists to position: relative for IE6 (iehacks.css):

  /**
   * Disappearing List-Background Bug
   * @see        http://www.positioniseverything.net/explorer/ie-listbug.html
   *
   * @bugfix
   * @affected   IE 5.x/Win, IE6
   * @css-for    IE 5.x/Win, IE6
   * @valid      yes
   */


  * html ul, * html ol, * html dl { position: relative; }

Overriding this for my sliding list solves the problem.