CSS Float and HTML

[driz]

Okay look at the following code:

THE CSS

.shadbotright2 { background: url(style_images/LunaElement/shad_bot_right2.gif) #3873b3; float:right; height: 79px; width: 24px; }
.shadbotleft2 { background: url(style_images/LunaElement/shad_bot_left2.gif) #3873b3; float:left; height: 79px; width: 24px; }


.shadleft { background: url(style_images/LunaElement/shad_left.gif) repeat-y left; padding-left: 15px; }
.shadright { background: url(style_images/LunaElement/shad_right.gif) repeat-y right; padding-right: 15px; }
.shadbotleft { background: url(style_images/LunaElement/shad_bot_left.gif) #3873b3; float: left; height: 24px; width: 79px; }
.shadbotmid { background: url(style_images/LunaElement/shad_bot_mid.gif) repeat-x; height: 24px; text-align: center; }
.shadbotright { background: url(style_images/LunaElement/shad_bot_right.gif) #3873b3; float: right; height: 24px; width: 79px; }

THE HTML

<div class="shadbotright2"></div><div class="shadbotleft2"></div><div class="shadleft"><div class="shadright">
<div class="borderwrap">
	<div class="maintitle">{$data['name']}</div><div class="borderwrap" style="padding: 0px;border:#5176B5 1px solid;border-top:0;">
	<table class='ipbtable' cellspacing="1">
		<tr> 
			<th align="left" colspan="2" width="66%">{ipb.lang['cat_name']}</th>
			<th align="center" width="7%">{ipb.lang['topics']}</th>
			<th align="center" width="7%">{ipb.lang['replies']}</th>
			<th align="left" width="35%">{ipb.lang['last_post_info']}</th>
		</tr>


	</table>
</div></div>
</div></div>
<div class="shadbotmid"><div class="shadbotleft"></div><div class="shadbotright"></div></div>
<br /><br />

Okay so this is for a IPB forum, and basically i'm wanting to add a shadow effect to the table, i've got it pretty much working apart from the two left and right graphics, which arnt floating where i want them, they are floating ontop of the actual table and messing it up, i've tried z-index: -100000; and its still not working, any ideas?

Heres a screenshot of it:

[+theblazingangel MVC]

i havent looked at your code but this is how ive done shadowing, works in firefox & ie

.border_t { background: url(images/t.jpg) repeat-x; }
.border_b { background: url(images/b.jpg) repeat-x; }
.border_tr { background: url(images/tr.jpg) no-repeat right; }
.border_br { background: url(images/br.jpg) no-repeat right; }
.border_tl { background: url(images/tl.jpg) no-repeat; padding: 10px 0 0 10px; }
.border_bl { background: url(images/bl.jpg) no-repeat; padding: 10px 0 0 10px; }
.border_r { background: url(images/r.jpg) repeat-y right; padding: 0 10px 0 0; }
.border_l { background: url(images/l.jpg) repeat-y left; padding: 0 0 0 10px; }

note 10px is used because thats the height & width of my images

<div class="border_t"><div class="border_tr"><div class="border_tl"></div></div></div>
<div class="border_l"><div class="border_r">
	<div id="bodyWrapper">
		jhgjrtretewtre
	</div>
</div></div>
<div class="border_b"><div class="border_br"><div class="border_bl"></div></div></div>

hope it helps

[driz]

Thanks for the input mate, but i want to fix the one i'm doing as its been designed differently to yours!

So help is still required, is it a css or html issue? And how do i fix it.