setBaseStyle with IE9 problem

[akhader]

Hi,

I tried to set the style of a TreeGrid here are the code and style:

SmartGwt version: SmartClient Version: SNAPSHOT_v8.3d_2012-10-11/LGPL Development Only (built 2012-10-11)

Browser: IE9
Document mode:IE9 Standared mode

HLayout hLayout = new HLayout();
		
		TreeGrid treeGrid = new TreeGrid();
		treeGrid.setBaseStyle("test-treeCell");
		
		
		Tree filtersTree = new Tree();
		filtersTree.setModelType(TreeModelType.PARENT);
		filtersTree.setIdField("user");
		filtersTree.setNameProperty("user");
		filtersTree.setRootValue(null);
		hLayout.addMember(treeGrid);
		hLayout.draw();
		
		hLayout.setWidth(400);
		hLayout.setHeight100();
		
	UserRecord[] recordList = new UserRecord[10];
		
		for(int i=0; i<10; i++) {
			UserRecord record = new UserRecord("user"+i, "status"+i);
			recordList[i] = record;
		}

		filtersTree.setData(recordList);
		treeGrid.setData(filtersTree);

.test-treeCell,
.test-treeCellDark,
.test-treeCellOver,
.test-treeCellOverDark,
.test-treeCellSelected,
.test-treeCellSelectedDark,
.test-treeCellSelectedOver,
.test-treeCellSelectedOverDark,
.test-treeCellDisabled,
.test-treeCellDisabledDark,
.test-treeTallCell,
.test-treeTallCellDark,
.test-treeTallCellOver,
.test-treeTallCellOverDark,
.test-treeTallCellSelected,
.test-treeTallCellSelectedDark,
.test-treeTallCellSelectedOver,
.test-treeTallCellSelectedOverDark,
.test-treeTallCellDisabled,
.test-treeTallCellDisabledDark {
    font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
	color: #404040;
	border-bottom: 1px solid #e0e0e0;
    height: 29px;
    background-color: #f7f7f7;
    padding-left: 2px;
    padding-right: 20px; 
    vertical-align: middle;
}

.test-treeTallCell,
.test-treeTallCellDark,
.test-treeTallCellOver,
.test-treeTallCellOverDark,
.test-treeTallCellSelected,
.test-treeTallCellSelectedDark,
.test-treeTallCellSelectedOver,
.test-treeTallCellSelectedOverDark,
.test-treeTallCellDisabled,
.test-treeTallCellDisabledDark {
    font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
	color: #404040;
	border-bottom: 1px solid #e0e0e0;
	height: 29px;
 }
 
 .test-treeTallBody {
 	background-color: #f7f7f7;
 }
 
.test-treeCellDark,
.test-treeTallCellDark {
	background-color: #fafafa;
	font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
	color: #404040;
	border-bottom: 1px solid #e0e0e0;
	height: 29px;
}

.test-treeCellOver,
.test-treeCellOverDark {
    background: #FFFFFF url('images/ListGrid/row_Over.png') repeat-x bottom left scroll;
    font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
	color: #404040;
	border-bottom: 1px solid #e0e0e0;
}

.test-treeTallCellOver,
.test-treeTallCellOverDark {
	background-color: #d8d8d8;
    height: 29px;
    font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
    color: #404040;
    border-bottom: 1px solid #e0e0e0;
}

.test-treeCellSelected,
.test-treeCellSelectedDark {
    background: #d9e4f6;
    font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
	color: #404040;
	border-bottom: 1px solid #e0e0e0;
	height: 29px;

}

.test-treeTallCellSelected,
.test-treeTallCellSelectedDark {
	background-color: #79baf9;
	font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
	color: #404040;
	border-bottom: 1px solid #e0e0e0;
}

.test-treeCellSelectedOver,
.test-treeCellSelectedOverDark {
    background: #79baf9 url('images/ListGrid/row_Over_Selected.png') repeat-x bottom left scroll;
    font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
	color: #404040;
	border-bottom: 1px solid #e0e0e0;
}

.test-treeTallCellSelectedOver,
.test-treeTallCellSelectedOverDark {
	background-color: #79baf9;
	font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
	color: #404040;
	border-bottom: 1px solid #e0e0e0;
}

.test-treeCellDisabled,
.test-treeCellDisabledDark,
.test-treeTallCellDisabled,
.test-treeTallCellDisabledDark {
	font-size: 10pt;
    font-family: Arial,Verdana,sans-serif;
	border-bottom: 1px solid #e0e0e0;
	color: #AAAAAA;
	background-color: #FFFFFF;
	overflow-y: scroll;
    overflow-x: hidden;
}

I used setBaseStyle, but on IE9 standard mode, the height of the cell is larger than "29px" as in the CSS.

But on FF and IE9 Quirk mode it works perfect.

I used setBaseStyle since I used a fixed cell height and the height is mentioned on CSS.

my question is why IE9 standard mode does not take the height of the cell in the CSS?

[Isomorphic]

Do not set sizes (including height) using CSS. See the Skinning Overview for background information.

In this case the right property is cellHeight on the grid.

[akhader]

Thanks Isomorphic for your reply.

Are there any other properties that I should not change them using CSS?

[Isomorphic]

If you read the docs you were referred to, you'll find out.

Please try to read the docs when asked, most of your questions are coming from not reading docs.

[akhader]

Do you mean the doc in this link:
http://www.smartclient.com/smartgwt/javadoc/

I read them, but I want to make sure from this.