music player. Options

[speakerboxx123]

i have a music player put half of it is hiding under my maintable.
i've already tried z-index but it doesn't want to come to the front.

CODE

<style type="text/css">
/*dont even think about stealing this code*/
#maintable {z-index:2; position:absolute; top:0%; left:50%; margin-left:-300px; !important}
#commentbox{width:331px; height:180px; position:absolute; top:300px; left:50%; margin-left:-187px;z-index:3;}
#navbar {z-index: 3; visibility:visible; position:absolute; top:480px; left:0%; margin-left:330px; width:312px; height:37px; overflow:auto;}
#profile div#aboutme {z-index: 3; visibility:visible; position:absolute; top:70px; left:50%; margin-left:-187px; width:331px; height:180px; overflow:auto;}
#profile div#stats{display:none !important;}
#profile div#splash{display:none !important;}
#profile div#bestfriends {display:none!important;}
#profile div#contactme {display:none!important;}
#profile div#links{display:none!important;}
#profile div#recententries {display:none!important;}
#profile div#favorites {display:none !important;}
#profile div#submissions {display:none !important;}
#profile div#skills {display:none !important;}
#profile div#recentphotos{display:none !important;}
#profile div#comments{display:none; !important}
#profile div#login{display:none;}
#profile div#footer {display:none; !important}
#header{ display:none;}
</style>

<style type="text/css">
a {
color : #1c1c1c !important;
font-family : Arial !important;
font-size : 10px !important;
letter-spacing : 0 !important;
font-weight : normal;
text-transform : none;
text-decoration : underline !important;
cursor : crosshair;
}
a:hover {
font-family : Arial !important;
font-size : 10px !important;
letter-spacing : 0 !important;
font-weight : normal;
text-transform : none;
text-decoration : underline !important;
background-color : transparent;
cursor : crosshair;
}
body {
color: #FFFFFF;
background-image : url('');
background-repeat: repeat;
background-position: 0% 0%;
background-color: #023e5a;
font-family : Arial !important;
font-size : 11px !important;
cursor : crosshair;
scrollbar-arrow-color: #2b2b2b;
scrollbar-face-color: #transparent;
scrollbar-3dlight-color: #transparent;
scrollbar-darkshadow-color: #transparent;
scrollbar-shadow-color: #transparent;
scrollbar-highlight-color: #transparent;
scrollbar-track-color: #transparent;
}
h1 {
color : #40627e;
}
h2 {
color : #084a86;
}
h3 {
color : #084a86;
}
h1, .h1 {
font-family : Century Gothic;
font-size : 26px;
font-weight : bold;
margin : 0;
padding : 0;
line-height : 30px;
border-bottom : 2px solid #40627e;
width: 340;
}
h2, .h2 {
font-family : Century Gothic;
font-size : 25px;
font-weight : bold;
margin : 0;
padding : 0;
border-bottom : 2px solid #084a86;
width: 340;
}
h3, .h3 {
font-family : Arial, Century Gothic;
font-size : 21px;
font-weight : bold;
margin : 0;
padding : 0;
text-align : right;
border-bottom : 2px dashed #084a86;
width: 340;
}
h4, .h4 {
font-family : Arial, Century Gothic;
font-size : 12px;
font-weight : bold;
margin : 0;
padding : 0;
}
h1 {color: #40627e;}
h2 {color: #084a86;}
h3 {color: #FF0000;}
p {
margin : 0;
padding : 0;
}
textarea {
border : 1px solid #000000;
font-size : 11px;
color : #1c1c1c;
font-family : arial;
cursor : crosshair;
padding-bottom: 0px;
text-align: right;
}
textarea:hover {
border : 1px solid #bec2b3;
text-align: center;
font-size : 11px;
color : #1c1c1c;
font-family : arial;
cursor : crosshair;
padding-bottom: 0px;
}
input {
width: 325px;
border : 1px solid #000000;
font-size : 11px;
color : #000000;
font-family : arial;
background-color : #ffffff;
cursor : crosshair;
padding-top: 0px;
}
input:hover {
width: 325px;
border : 1px solid #bec2b3;
cursor : crosshair;
padding-top: 0px;
}
.innerbox, .entrybox{color: #2b2b2b; background-color: transparent !important;}
#header a img {display:none;}
ul#navigation {
float: left;
position: absolute;
top: 0%;
margin-top: 505px;
left: 0%;
margin-left: 0px;
padding: 0;
width: 600px;
background-color: #595758;
color: #646263;
z-index: 1;
}ul#navigation {
float: left;
position: absolute;
top: 0%;
margin-top: 505px;
left: 0%;
margin-left: 0px;
padding: 0;
width: 600px;
background-color: #595758;
z-index: 1;
}
ul#navigation li {
display: inline;
}
.go:hover {display:block;width:106px;height:43px; background-color:transparent; background-image:url("http://i32.tinypic.com/hsrix3.png"); background-repeat:no-repeat; background-position:bottom left;}
</style>

<div id="maintable">
<img src=http://i28.tinypic.com/29nuy4j.png>
</div>
<div id="navbar"><img src="http://i26.tinypic.com/29pxb3l.png" width="295" border="0" usemap="#imap_14" >
<map id="imap_14" name="imap_14" >
<area shape="rect" coords="-10,-10,92,35" alt="layouts" title="layouts" href="http://www.createblog.com/layouts/">
<area shape="rect" coords="93,-12,206,35" alt="graphics" title="graphics" href="http://www.createblog.com/graphics">
<area shape="rect" coords="206,-13,309,35" alt="forums" title="forums" href="http://www.createblog.com/forums">
</map>
</div>
<div id="commentbox">
<form action="comment.php" method="post">
<textarea name="comment" style="width: 325px; height: 80px">Talk To meh!</textarea>
<br>
<center><input type="submit" value="enter!" class="button" /></center>
</div>

<div style=position:absolute; top:450px; left:50%; margin-left: 0px; width:180px; height:73px; z-index:3;>
<p style="visibility:visible;"><embed src="http://assets.myflashfetish.com/swf/mp3/myflashfetish-mp3-player.swf" quality="high" wmode="transparent" flashvars="myid=10433687&path=2008/06/22&mycolor=3d7896&mycolor2=0090D8&mycolor3=000000&autoplay=true&rand=0&f=4&vol=100&pat=5" width="218" height="155" name="myflashfetish" align="middle"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" /><br>
</div>

Reason for edit: it's "codebox" not "code" when entering the codes. :)