DIV on top problem

[burginsteve]

1) Script Title:
Animated Collapse

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem:

I've cannot get my collapsible DIV to slide down over DIVs that are positioned lower down the page, the lower DIVs are always on-top. I have styled all the DIVs with a z-index and given the DIV that I want to appear to the front an index of 1000 and all the other a lower number. What am I missing?

[ddadmin]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[burginsteve]

If you follow the link below and in the searchBox top-right of the page is the link... i (for informatiom) you'll see the problem when you click it. Hopefully someone will solve it (is there a God?) but I'll leave the pig-of-a-page uploaded to help future sufferers.

here... http://www.dos2.co.uk/index_with_DIV_problem.htm

[codeexploiter]

Set the "z-index" property of the div element whose ID is "info" to some big number and it will come in front of other items. For eg:

<div id="info" style="z-index: 1000;">

[burginsteve]

Thanks for that but I've done that and it's still behind the two DIVs that are just beneath it, yet their z-indexs are 99 and 98.

[codeexploiter]

Yes sorry I was dealing with IE 8 Beta 3 and FF 2.0.0.13 and in both when the z-index of "info" element increased the section displayed on top of other divs and I've posted it.

But when I checked it with IE7 now the problem still persists. But the main problem is while loading your page it takes forever in IE (especially) that makes it difficult to test...

[burginsteve]

Your right about the loading time, that's an issue I will be addressing shortly. What do you think causes the problem or my problem in IE7?

[burginsteve]

Sorry about the heavy page, it was full of different ideas. Here it is a lot lighter

here... http://www.dos2.co.uk/index_with_DIV_problem.htm

[codeexploiter]

You need to change your <form> element whose ID is "searchform" in the following manner:

<FORM id=searchform onsubmit=javascript:history.go(0) method=post name=form style="z-index:1000;">

This problem occur because the z-index in IE and FF differs in a great manner. But in IE8 Beta 3 this problem doesn't exists. Once you make the mentioned change in your source in IE7 also it will start rendering the item correctly.

[burginsteve]

Many, many, many thanks, it works a treat now. I'll leave the web pages uploaded so future viewers can see the problem and the cure, the DIV opens on clicking the i at the top of the search box.

http://www.dos2.co.uk/index_without_DIV_problem.htm

http://www.dos2.co.uk/index_with_DIV_problem.htm