Cross Browser problems with Vaadin Vertical Layout height

Hi
I am facing cross browser problems. I have a Table with column generator returning a vertical layout. When the user clicks on this column I need to change the background color of the selected column and then navigate to a different view. Since i am using a layout click listener to handle the event i want the layout to have the size of the entire TD. I know that the layout cannot span out to entire TD as the TD 's height will be determined by the size of the contents in the adjoining TD which is usually much , much, much large text.
So i decided to handle this via CSS.

I made the Height of the TD to be 100%;


.v-table-cell-content{/** To Offset the size if the vertical layout to the size of TD **/
	height: 100%; 	
}

.dailyTasks .v-table-body .v-table-cell-wrapper { // dailyTasks is the style name given to the table
     padding-bottom: 0px;
     padding-top: 0px;
     [b]
height:inherit;/** To Offset to the height of its parent **/	
[/b]
}

Then i want the child of the TD which is my vertical layout to inherit its height from the parent which is the TD or rather the .v-table-cell-wrapper.


.v-verticallayout-taskInfo, .taskInfo	{
                       [b]
display:inline-table !important;
                        height: inherit!important;
[/b]
}

When the user clicks on the column i change the layouts’s style name to “dailyTasksCellSelect”
For this style name i have changed the style attributes as below


.v-table-cell-content .v-verticallayout-dailyTasksCellSelect {
	background: transparent;
        color: #ffffff;
        text-shadow: none !important;	 	
  	background:url(images/bg_side_gradient.png) repeat-x left top #015cbd !important;
	[b]
display:inline-table; /** force the .v-verticallayout-dailyTasksCellSelect to behave as if it were a table and not as a DIV **/
	height: inherit !important;	/** Inherit the height value from the parent which is the td **/
[/b]
}


The above changes works perfectly well in Firefox (19.0)
. This fails completly in chrome(Version 25.0.1364.97 m) and in safari
My application should support chrome and safari as it is largely intended to be used in hand held devices.
Is there something else which needs to be done. I am not bothered about IE at all.
A static test html as below with same CSS styles works as expected in all the above browsers.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
}
table td	{
	padding:0;
	height:100%;
	
	
}

.test-parent	{
	border:2px solid #F00;
	
	
	
}
.test-child	{
	background:#06F;
	display:inline-table;
	height:inherit;
	
	
}




</style>
</head>

<body>
<table width="600px">
<tr>
<td class="test-parent">
<div class="test-child">
Nokia Corporation is a Finland based m

</div>
</td>

<td class="test-parent">

<div class="test-child">
Nokia Corporation is a Finland based multinational communications and information technology company. CGI is one of its primary vendors that  helps Nokia meet its IT business requirements. 
</div>
</td>
</tr>

<tr>
<td class="test-parent">
<div class="test-child">
Nokia Corporation is a Finland based m

</div>
</td>

<td class="test-parent">

<div class="test-child">
Nokia Corporation is a Finland based multinational communications and information technology company. CGI is one of its primary vendors that  helps Nokia meet its IT business requirements. Nokia Corporation is a Finland based multinational communications and information technology company. CGI is one of its primary vendors that  helps Nokia meet its IT business requirements. Nokia Corporation is a Finland based multinational communications and information technology company. CGI is one of its primary vendors that  helps Nokia meet its IT business requirements. Nokia Corporation is a Finland based multinational communications and information technology company. CGI is one of its primary vendors that  helps Nokia meet its IT business requirements. 
</div>
</td>
</tr>


<tr>
<td class="test-parent">
<div class="test-child">
Nokia Conland based m

</div>
</td>

<td class="test-parent">

<div class="test-child">
Nokia Nokia Corporation is a Finland based multinational communications and information 
</div>
</td>
</tr>
</table>
</body>
</html>

Please help me…
12845.jpg
12846.jpg
12847.jpg

Resolved this Just in case any one interested, here is how its resolved.

Firefox requires an display : in-line-table.


/* Make the vertical layout's display attribute as inline-table only for firefox */
@-moz-document url-prefix() { 
  .v-verticallayout-taskInfo {display:inline-table !important;},
}

where as for chrome and safari display attribute is not necessary just used


.v-verticallayout-taskInfo, .taskInfo	{height:100% !important; }