Simple Layering Issue (i hope)

Get Started
1

Hi guys, the only thing stopping me from putting my site live is the layering of the 3 main nav buttons – See live site here http://www.chrisroytaylor.com.au/index1.html For some reason IE7 doesn’t display the 3 button/s but IE8 and all other browsers do. Not sure if i’ve done anything wrong or is it just IE7?

This is 1 of the buttons

<!-- BIO BUTTON -->
<div class="main_box1">
<a id="main_box_image1" href="chris_roy_taylor_bio.html" title="My Bio"><span>Email Us</span></a>
</div>

It needs to be layered over this below

<style type="text/css"> 
	body {margin: 0px; padding: 0px;}
	.main_BG {width: 100%; height: 1400px; background-image:url(img/main_BG.gif);
	position:absolute;
	top:0px;
	left:0px;
	padding:0px;
	z-index:1;
	}
.style1 {color: #000000}
.style2 {color: #9BC03B}
.style3 {color: #86a42c}
</style>

I can place it in between <body> and <div id=”wrap”> But then it will move depending on browser size and it needs to be positioned in a particular spot.

Thanks heaps people!

2

If it were me, I wouldn’t be using position: absolute but rather just work with the normal document flow. Also, why do the spans inside those links all say Email Us?

3

I got it working in IE7 by removing Z-index from .main_BG but what will removing position: absolute do?

I have since removed “email Us” I copied it from another site i did and at the time hadn’t cleaned up my code.