[SOLVED] Background doesn't cove whole background

[F1Fan]

I have a div with several elements in it and I want the class to change when you mouse over and out. No problem, that's working perfectly. The basic change is the second class has a background color, and the first doesn't.

 

The problem is that I want the bgcolor to completely occupy the background, and it's only covering a section of it (see screenshot).

 

Here's my PHP/html:

<div class="filediv" onclick="<?php echo $onclick; ?>" onmouseover="this.className='filedivover';" 
onmouseout="this.className='filediv';">
<table class="filetable">
	<tr>
		<td class="tdimage">
			<div class="divimage">
				<div class="lockover<?php echo ($f['view_access']?"off":"on"); ?>">
					<image src="images/library/lock.png" title="You do not have access to this 
						<?php echo $f['type']; ?>">
				</div>
				<image src="images/library/<?php echo $f['image']; ?>">
			</div>
		</td>
	</tr>
	<tr>
		<td title="<?php echo $f['title']; ?>">
			<div class="tdtitle">
				<?php echo $f['title']; ?>
			</div>
		</td>
	</tr>
	<tr>
		<td title="<?php echo $f['description']; ?>">
			<div class="tddesc">
				<?php echo $f['description']; ?>
			</div>
		</td>
	</tr>
</table>
</div>

and here's my CSS:

.filediv{
cursor: pointer;
position: relative;
top: 0px;
left: 0px;
display: inline;
width: 150px;
height: 150px;
text-align: center;
}
.filedivover{
cursor: pointer;
position: relative;
top: 0px;
left: 0px;
display: inline;
width: 150px;
height: 150px;
text-align: center;
background-color: #C8C8C8;
}
.filetable{
cursor: pointer;
position: relative;
top: 0px;
left: 0px;
display: inline;
width: 150px;
height: 150px;
text-align: center;
background-color: transparent;
}
.lockoveron{
display: block;
position: absolute;
top: 0px;
left: 43px;
z-index: 1;
background-color: transparent;
}
.lockoveroff{
display: none;
background-color: transparent;
}
.divimage{
text-align: center;
width: 150px;
height: 64px;
position: relative;
top: 0px;
left: 0px;
z-index: 0;
background-color: transparent;
}
.tdimage{
text-align: center;
width: 150px;
height: 64px;
background-color: transparent;
}
.tdtitle{
font-weight: bold;
text-align: center;
width: 150px;
height: 20px;
overflow: hidden;
background-color: transparent;
}
.tddesc{
text-align: center;
width: 150px;
height: 66px;
overflow: hidden;
background-color: transparent;
}

 

The first div is the main div, and the only one that's not working how I want.

And really only the first two CSS blocks are my problems.

 

Please help!

[F1Fan]

Sorry, forgot the screenshot.

 

[attachment deleted by admin]

[F1Fan]

Anyone?