View Full Version : DIV on top problem

03-25-2008, 05:57 PM
1) Script Title:
Animated Collapse

2) Script URL (on DD):

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?

03-25-2008, 07:12 PM
Please post a link to the page on your site that contains the problematic script so we can check it out.

03-28-2008, 05:49 AM
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

03-28-2008, 06:52 AM
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;">

03-28-2008, 09:18 AM
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.

03-28-2008, 09:53 AM
Yes sorry I was dealing with IE 8 Beta 3 and FF 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...

03-28-2008, 10:06 AM
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?

03-28-2008, 10:42 AM
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

03-31-2008, 04:05 AM
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.

03-31-2008, 09:57 AM
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.