Animated Collapsible DIV script not working in FF

[VikingMonkey]

Animated Collapsible DIV
http://www.dynamicdrive.com/dynamici...edcollapse.htm

I have just implemented this on a portfolio gallery for a bathroom fitter's site. Its all working fine in IE, but in FF the show/hide toggle is not working. All that happens is it closes and then immediately opens again when the toggle button is pressed.

Page in question is at http://www.nwbathrooms.co.uk/gallery.html

Any ideas what I am doing wrong? Is it possibly a conflict with the lightbox script I am also using?, although I would expect to see this with IE too.

Thanks, David.

[ddadmin]

Hmm no JavaScript errors in FF, so this shouldn't be a scripting conflict issue. Just to test out whether the content is, what happens if you replace the content that's being toggled to something more arbitrary, like just a paragraph and some text for example? I'm referring to this part of the markup:

<div id="bathrooms" style="display:none;">

<div class="gallery" >

<div class="imgleft"><a href="images/itbathroom1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_itbathroom1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter"><a href="images/itbathroom2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_itbathroom2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter2"><a href="images/itbathroom3.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_itbathroom3.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgright"><a href="images/blackandwhite1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_blackandwhite1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>


<div class="imgleft"><a href="images/blackandwhite2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_blackandwhite2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter"><a href="images/mosaic1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_mosaic1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter2"><a href="images/mosaic2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_mosaic2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgright"><a href="images/mosaic3.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_mosaic3.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>

<div class="imgleft"><a href="images/tanbathroom1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_tanbathroom1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter"><a href="images/tanbathroom2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_tanbathroom2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter2"><a href="images/tanbathroom3.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_tanbathroom3.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgright"><a href="images/sink.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_sink.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>

<div class="imgleft"><a href="images/bwbathroom1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_bwbathroom1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter"><a href="images/bwbathroom2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_bwbathroom2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter2"><a href="images/bwbathroom3.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_bwbathroom3.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgright"><a href="images/bwbathroom4.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_bwbathroom4.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>

</div>
</div>

[VikingMonkey]

Thanks for your response.

If I replace everything after the 'gallery' div inside the 'bathrooms' div with a basic paragraph it works as expected in FF

The problem appears therefore to be in my series of images that make up the portfolio gallery.

I then tried removing the rel="lightbox[gallery]" as that is related to the lighbox code but that didnt help either, so its not that.

The CSS for the image divs is basic

.gallery img {  margin: 0 auto; border: 1px solid #475C78;}
.imgleft {width: 122px; height: 100px; float:left; margin: 5px 0 15px 0;}
.imgcenter {width: 122px; height: 100px; float:left; margin: 5px 0 15px 0;}
.imgcenter2 {width: 122px; height: 100px; float:left; margin: 5px 0 15px 0;}
.imgright {width: 100px; height: 100px; float:left; margin: 5px 0 15px 0; }

I have no idea what could be wrong. Any other suggestions?

David.

[ddadmin]

The culprit seems to be float:left in your CSS for the gallery images. You may want to experiment with a few changes to this portion of your CSS to see what FF likes more. You might also want to explicitly clear the contents within your gallery at the very end (add code in red):

<div id="bathrooms" style="display:none;">

<div class="gallery" >

<div class="imgleft"><a href="images/itbathroom1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_itbathroom1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter"><a href="images/itbathroom2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_itbathroom2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter2"><a href="images/itbathroom3.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_itbathroom3.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgright"><a href="images/blackandwhite1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_blackandwhite1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>


<div class="imgleft"><a href="images/blackandwhite2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_blackandwhite2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter"><a href="images/mosaic1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_mosaic1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter2"><a href="images/mosaic2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_mosaic2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgright"><a href="images/mosaic3.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_mosaic3.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>

<div class="imgleft"><a href="images/tanbathroom1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_tanbathroom1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter"><a href="images/tanbathroom2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_tanbathroom2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter2"><a href="images/tanbathroom3.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_tanbathroom3.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgright"><a href="images/sink.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_sink.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>

<div class="imgleft"><a href="images/bwbathroom1.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_bwbathroom1.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter"><a href="images/bwbathroom2.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_bwbathroom2.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgcenter2"><a href="images/bwbathroom3.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_bwbathroom3.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>
<div class="imgright"><a href="images/bwbathroom4.jpg" rel="lightbox[gallery]" title=""><img src="images/thumbs/sm_bwbathroom4.jpg" alt="Click to Enlarge" width="100" height="100" /></a></div>

</div>
<br style="clear:left" />
</div>

[VikingMonkey]

Thank you so much!

I didnt need to mess around with the floats in the end. Just simply adding the clear at the end of each gallery fixed it straight away.

You are a genius