6. November 2009 - 14:46 — Martin
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; }
* 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.