Absolutely Positioned Elements Disappearing in Firefox

z-index absolutely positioned bug in firefox

[ShamanDev]

Building a sliding spry element that creates the effect of a tab expanding upwards. Renders perfect in both Safari and Opera9, however in firefox the heading tag and subsequent <a> that controls the effect are visible only for a brief second and the page loads then disappear from view all together.

here is a link to the page: /* snip */

the css for those elements:

#showcase {
height: 400px;
width: 100%;
position: relative;
border-bottom: 5px solid #7a8157;
}
#showcase #slideCanvas {
height: 200px;
width: 100%;
position: relative;
vertical-align: baseline;
padding-top: 200px;
}
#showcase #slideCanvas .spryEffectSlide {
height: 250px;
width: 400px;
position: absolute;
bottom: 0px;
}
#showcase #slideCanvas .spryEffectSlideItemContainer {
margin-left: 25px;
margin-top: 50px;
}
#showcase #slideCanvas .spryEffectSlide h3 {
height: 40px;
width: 230px;
}
#showcase #slideCanvas #spryEffectSlideItemOne {
z-index: 1;
background: url(../../_images/common/style/backgroundSpryEffectSlideItemOne.png);
}
#showcase #slideCanvas #spryEffectSlideItemOne a h3 {
background: url(../../_images/common/style/sectionHeadingSpryEffectSlideItemOne.png) no-repeat 10px 10px;

}
#showcase #slideCanvas #spryEffectSlideItemTwo {
z-index: 2;
left: 250px;
background: url(../../_images/common/style/backgroundSpryEffectSlideItemTwo.png);
}
#showcase #slideCanvas #spryEffectSlideItemTwo a h3 {
background: url(../../_images/common/style/sectionHeadingSpryEffectSlideItemTwo.png) no-repeat 10px 10px;
}

#showcase #slideCanvas #spryEffectSlideItemThree {
z-index: 3;
left: 500px;
background: url(../../_images/common/style/backgroundSpryEffectSlideItemThree.png);
}
#showcase #slideCanvas #spryEffectSlideItemThree a h3 {
background: url(../../_images/common/style/sectionHeadingSpryEffectSlideItemThree.png) no-repeat 15px 15px;
}

the html structure:

<div id="showcase" class="showcaseBackground"> 
 <div class="layoutContainer"> 
 <div id="slideCanvas">  
 <div id="spryEffectSlideItemOne" class="spryEffectSlide"> 
 <a onclick="spryEffectSlideItemOne.start(); return false;" href="#"><h3><span class="displayNone">Journey to Places of Power</span></h3></a> 
 <div class="spryEffectSlideItemContainer">  
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 <a href="">Link</a> 
 </div> 
 </div> 
 <div id="spryEffectSlideItemTwo" class="spryEffectSlide"> 
 <a onclick="spryEffectSlideItemTwo.start(); return false;" href="#"><h3><span class="displayNone">Explore Your Spirituality</span></h3></a> 
 <div class="spryEffectSlideItemContainer"> 
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 <a href="">Link</a> 
 </div> 
 </div> 
 <div id="spryEffectSlideItemThree" class="spryEffectSlide"> 
 <a onclick="spryEffectSlideItemThree.start(); return false;" href="#"><h3><span class="displayNone">Share The Experience</span></h3></a> 
 <div class="spryEffectSlideItemContainer"> 
 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> 
 <a href="">Link</a> 
 </div> 
 </div> 
 </div> 
 </div> 
 </div> 

I've searched around for a similar issue, but without knowing what is exactly causing this problem its hard to find relevant results.

Any help would be greatly appreciated.

Thanks.

[edited by: limbo at 2:07 pm (utc) on Dec. 22, 2009]
[edit reason] No URI's please, see TOS [webmasterworld.com] [/edit]

[alias]

CSS alone can't (yet) just show and hide an object.

IMO it's a safe bet the problem is somewhere in the JavaScript for spryEffectSlideItemOne.start().

[ShamanDev]

I turned off css styles in FF and was surprised to find that the 3 spry elements function 100% correctly. This is indicating to me that it is a css error. I remember another time I was trying to use image replacement via display:none and AP html tags where the links became unclickable though still visible.

Also, I tested in IE8 last night and it renders it just like FF does except that one of the divs is fully expanded to start..

**Update: changed the containing divs to float in normal document flow instead of using AP.. same results with regard to the h3 and a tags.