[SOLVED] Div background problem

[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" 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 (the first two are the problem ones):

.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.

 

Any help will be greatly appreciated

 

[attachment deleted by admin]

[F1Fan]

In case anyone cares, it turns out that the "display: inline;" property is not compatible with backgrounds (at least not with divs). If I removed that line, the background problem went away, but that just made it not display how I wanted on the page. So, I had to create a more complicated work around solution.