JavaScript Scrollbar Help!!!

Hey Guys
I'm a noob as far as Javascript goes but, I'll cut to the chase...
I have a Horizontal scrollbar in my site which i made in javascript and is working fine.

But i need the titleleft.gif (see below) to be in front of the Horizontal Scrollbar (Slider_1_div) It has transparency so the images can be seen behind it. I have Put the image on an separate div layer and changed the z-index to be higher than the scrollbar, however when i load the page the scrollbar loads over the top still... Please Help!!

<body>
<link href="./imageslider.css" type=text/css rel=stylesheet>
<script language="javascript" src="./imageslider.js"></script>
<script language="javascript" src="./imageslidercfg.js"></script>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" background="images/titlemiddle.gif">
<tr>
<td width="75%"><div id="Slider1_div" style="width:606px;height:97px; z-index:1;">
<div id="Layer1" style="width:606px;height:124px; z-index:6; position:absolute"><img src="images/titleleft.gif" width="606" height="124"/></div>
</div>
</td>
</body>