Firefox2 display: inline-block hack with position: relative not working - firefox

Question

Can anyone tell me if it's possible to make this work in Firefox2 (and also IE6)?
http://collinatorstudios.com/ff2_test.html
I was able to emulate inline-block with the '-moz-inline-stack' hack, however it appears that it ignores position: relative, so elements with position absolute inside the inline-stack container do not appear relative to where they should.. instead they are at the top right of the page in FF2...
I know FF2 is outdated and I probably shouldn't care, but I am wondering if there is a way to achieve this, and also I need it to work in IE6.
Thank you.

Answer 1

Unfortunately I no longer have FF2 to test this for you, but I think the only way to make in work in that is to nest a div and apply position relative to the nested div so it would be inside you li
as for IE6 I think an alteration to your hacks should works for it too..
change:
.item {
list-style-type: none;
height: 50px;
width: 50px;
position: relative;
border: 1px solid teal;
background: #00f;
display: -moz-inline-stack; /* for FF2 */
display: inline-block;
/* <ie hacks> */
zoom: 1;
*display: inline;
min-height: 50px;
_height: 50px; /* for ie6 */
/* </ie hacks> */
}
to:
.item {
list-style-type: none;
height: 50px;
width: 50px;
position: relative;
border: 1px solid teal;
background: #00f;
display: -moz-inline-stack; /* for FF2 */
display: inline-block;
}
.item {/** IE Hacks **/
display: inline !ie7; /* should work for 6 as well */
_height: 50px; /* IE6 */
}
putting the display:inline rule in a separate ruleset means you don't need zoom, and it should work for both IE6 and 7.
I just moved the min-height hack to keep them together ;) - as an aside I'm not sure why you've got min-height as you already have a height rule further up the stack and the 2nd height rule (which I removed) was just repeating, so perhaps you don't need the IE6 min-height hack anyway?