Layout problem, need the pros!

[Immortal]

Hey guys, I will try keep this short. Having a layout problem with CSS and really need some help, as you can see in my below layout, the main structure bit, it all the way at the top and cut off, anyone know whats going on?



Code:

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url();
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
	position: inherit;
}
#main {
	background-image: url(Images/backgroundScene.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	height: 100%;
	position: absolute;
	width: 100%;
	text-align: center;
	vertical-align: bottom;
}
#main #main-structure {
	text-align: center; /* counter the body center */
	height: 500px;
	width: 625px;
	background-image: url(Images/mainStructure.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	z-index: 2;
}
#overlay {
	background-image: url(Images/overlay.png);
	height: 330px;
	width: 100%;
	z-index: 5;
	background-position: center bottom;
}
-->
</style>

Thanks for any help!

[TheJoshMan]

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

[Immortal]

Hi, yea sure here we go:

HERE

[TheJoshMan]

Looks right to me in FF and IE, so I'm assuming you've already figured it out.

[SpOrTsDuDe-Reese]

You have position:inherit on the body tag. Where is it supposed to inherit from? Try adding some top padding to the area.