z-index on images not working

[laPistola]

Basic im doing tabs for the links in my clients website but z-index isn't doing anything at all???

 

when the page loads im trying to change the layer order of the tabs as they over lap but not in the order i would like them.

 

here is here the code

 

<div id="mainNav">
      	<a href="../index.php" title="Owen Williams Loughborough Home Page" onmouseover="rollOver('homeImg',0)" onmouseout="rollOver('homeImg',1)"><img src="../images/homeButt.png" alt="Owen Williams - Joinery and Building Services" name="homeImg" width="77" height="30" id="homeImg" style="z-index:400;" /></a>
        <a href="../services.php" title="Owen Williams Loughborough Home Page" onmouseover="rollOver('servicesImg',0)" onmouseout="rollOver('servicesImg',1)"><img src="../images/servicesButt.png" alt="Owen Williams - Joinery and Building Services" name="servicesImg" width="96" height="30" id="servicesImg" style="z-index:3;" /></a>
        <a href="../testi.php" title="Owen Williams Loughborough Home Page" onmouseover="rollOver('testiImg',0)" onmouseout="rollOver('testiImg',1)"><img src="../images/testiButt.png" alt="Owen Williams - Joinery and Building Services" name="testiImg" width="128" height="30" id="testiImg" style="z-index:3;" /></a> 
        <a href="../contact.php" title="Owen Williams Loughborough Home Page" onmouseover="rollOver('contactImg',0)" onmouseout="rollOver('contactImg',1)"><img src="../images/contactButt.png" alt="Owen Williams - Joinery and Building Services" name="contactImg" width="113" height="30" id="contactImg" style="z-index:1; margin-right:30px" /></a>
      </div>

 

Nothing anywhere is controlling the z-index, i have even taken out the zIndex in my JS script.

 

Thank you before hand.