0

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?

2
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by lps
0

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?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.