Hi, I'm building a simple holding page - and using jQuery to handle two drop down panels - one for some text and one with a contact form.

I'm having real issues with the ordering of the components that make up these panels - see for yourself at http://tomlinson.dj/thornsett/wheston/index.html.

Tab A behaves beautifully -expands divA to open - covering tab b as it drops, and bringing tab A with it so you can click it to close up.

Tab B opens div B, but pushes tab A AND tab B down with it. Clicking on tab A causes div A to accordion out from the open div B.

The pertinent css looks like this

Code:
/* contact divs and css */
#contactArea { z-index: 10; height: 225px; border-bottom: 5px solid #006293; overflow: hidden; background-color: #006293; }
#container { z-index: -3; position: absolute; right: 0px; width: 460px; margin: 0 auto; }
a.contact { z-index: -3; position: absolute; right: 10px; height: 48px; width: 250px; display: block; text-indent: -9999px; background: url(../images/register.png) no-repeat 0 0; }

/* 'about' divs and css */
#informationArea { z-index: 15; height: 225px; border-bottom: 5px solid #8FCFF3; overflow: hidden; background-color: #8FCFF3; }
#container2 { z-index: -4; position: absolute; left: 0px; width: 460px; margin: 0 auto; }
a.contact2 { z-index: -4; position: absolute, left: 10px; height: 48px; width: 250px; display: block; text-indent: -9999px; background: url(../images/about.png) no-repeat 0 0; }

* { margin: 0; padding: 0; outline: 0; } 

body { background-color: #fff; overflow:hidden; padding:0; margin:0; height:100%;width:100%; }
and the html using it looks like this...

Code:
    <body>
        <!-- This is the background image --> 
        <img id="bgimg" src="images/whestonweboptimised.jpg" /> 
	<div id="contactArea">
        <!-- form code stripped out here for clarity -->
	</div>
	
	<div id="container">
	    <div id="header">
    		<a class="contact" href="#">About Wheston</a>
        </div>
	</div>

	<div id="informationArea">
     some holding text
	</div>
	
	<div id="container2">
	    <div id="header">
    		<a class="contact2" href="#">Contact Us</a>
        </div>
	</div>
Any thoughts, guidance will be most welcome, thanks in advance, and...

rgds

bdjt