Row style difference

[ndeniche]

Hello guys

I have two table styles for a web application, in which the tables rows are clickable as objects (meaning, clicking anywhere in the <tr></tr> tag will send the click command.

The problem is, my two table styles behave differently. I want the row to change background color on hover, so that, if my cursor is anywhere on the row (any cell), the row will activate the on hover style.

The first style works perfectly, though the second not as much. My two styles are as follows:

#formProyectoContainer .form  .table
{
	background-color:#fff;
	background-image:url("images/tblBackground.png");
	background-repeat:no-repeat;
	background-position:bottom right;
	
	border:inset 2px #ccf;
	border-radius:5px;
	-moz-border-radius:5px;
	
	overflow:auto;
	width:100%;
	height:200px;
}

#formProyectoContainer .form  .table table
{
	background-repeat:no-repeat;
	background-position:bottom right;

	border-collapse:collapse;
	border-radius:5px;
	width:100%
}

#formProyectoContainer .form  .table table tr
{
	background-image:url("images/tblRowBackground.png");
	border: 1px solid #fff;
	cursor:pointer;
}

#formProyectoContainer .form  .table table thead tr th
{
	background-color:#bbc;
	cursor:default;
}

#formProyectoContainer .form  .table table tr:hover
{
	background-image:url("images/tblRowBackgroundHover.png");
}

#formProyectoContainer .form  .table table tr td, #formProyectoContainer .form  .table table thead tr th
{
	padding:8px;
}

This one above works fine. The one I have problems with is this one

.tableDetalle
{

	background-color:#fff;
	background-image:url("images/tblBackground.png");
	background-repeat:no-repeat;
	background-position:bottom right;
	
	border:inset 2px #ccf;
	border-radius:5px;
	-moz-border-radius:5px;
	
	overflow:auto;
	width:96%;
	height:85%;
	
	margin:20px;
	position:absolute;
	
	font-size:small;
	
}

.tableDetalle table
{
	border-collapse:collapse;
	border-radius:5px;
	width:100%
}

.tableDetalle table tr
{
	background-image:url("images/tableGrey.png");
	border:solid 1px #ccc;
	cursor:pointer;
}

.tableDetalle table thead tr th
{
	background-color:#ccc;
	text-align:left;
}

.tableDetalle table tr:hover
{
	background-image:url("images/tblRowBackgroundHover.png");
}

.tableDetalle table tr td, .tableDetalle table thead tr th
{
	padding-left:5px;
}

Where can I be wrong? Do outer container styles have to do with this?

[ndeniche]

Ok, found what is affecting my hover property... Seems like the z-index of the outer container of my table is affecting my row, so the hover propert only works over the text in the table.

How can I override this?

[lps]

Give the tr td an id and use the hover effect on it.