IE shows page fine, half missing in FF

[freeeky]

i know, its a simple thing. my css is probably messed up. but.. im new at this, take it easy on me

so, the page is studio22, and its showing up fine in ie7.
the problem is: when viewed in firefox the bottom half disappears under the top image. i know it has smth to do with z-index positioning, because it was the last thing that ive added to page code.

can anyone help me out here, please?
id really be grateful!

thanks,
ana.

[shalom_m]

Change #index to

#index { width:860px;

margin-right:auto;
margin-left:auto;
height: 510px;
margin-top:0px;
}

[freeeky]

well, its true, it does show the bottom half of page in firefox now... but kinda messes up everything else.

plus, any ideas on the menu? i know i shouldnt be using tables in our css-only world, but had to be done for the time being (till i learn how to do a menu like that with css).

thanks!
ana.

[shalom_m]

On second thought, I see no reason to use z-index at all.
As to tables, you really don't need them here.

[nuideas]

just looking through the code.. why are you using the tables? is it to create the nav? as i could show you a painless way to do it with a list?!

[nuideas]

simple way to do ur nav.

have a list:

<ul>
<li class="item1"><a href=""><span></span>item 1</a></li>
<li class="item2"><a href=""><span></span>item 2</a></li>
<li class="item3"><a href=""><span></span>item 3</a></li>
</ul>

then make the list inline.
use the span to show the image you require by background image / position:relative and also make the span a block element and hide the text below by making the li's float left and overflow:hidden;

this will mean the text still shows when images are switched off.

[nuideas]

is that clear?