Cell Styling Issue on Quirk mode

[akhader]

Hello All,

I tried to style the Cells on the ListGrid on my application it works fine on FF15 but on IE did not work.

After couple of hours investigation on the problem I found it works when the "Document Mode" is IE9 Standard mode but it does not work on Quirk mode, if I changed my application to Standard mode a lot of styling issues will appear on other component in the application.

I made a sample application that reflect what I am facing:

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

Browser:IE9 Quirk mode

Here is the code:

	public void onModuleLoad() {
		
		Window gridWindow = new Window();
		gridWindow.setSize("700", "500");
		gridWindow.setBodyStyle("test-dialogBody");
		gridWindow.setStyleName("test-dialog");
		
		TabSet tabSet = new TabSet();
		Tab tab1 = new Tab("Test", "Test");
		tab1.setTabSet(tabSet);
		gridWindow.addItem(tabSet);
		
		ListGrid grid = new ListGrid();
		grid.setBaseStyle("test-DialogListGridCell"); //$NON-NLS-1$   pm-ListGridTallCell
		grid.setBodyStyleName("test-DialogListGridBody"); //$NON-NLS-1$
		grid.setStyleName("test-DialogListGrid"); //$NON-NLS-1$
		grid.setWidth100();
		grid.setHeight100();
		
		ListGridField userField = new ListGridField("user","user");
		ListGridField statusField = new ListGridField("status","status");
		grid.setFields(userField, statusField);
		
		UserRecord[] recordList = new UserRecord[10];
		
		for(int i=0; i<10; i++) {
			UserRecord record = new UserRecord("user"+i, "status"+i);
			recordList[i] = record;
		}
		
		grid.setRecords(recordList);
		
		tab1.setPane(grid);
		
		gridWindow.draw();
	}  
}


class UserRecord extends ListGridRecord {
	public static final String USER = "user";
	public static final String STATUS = "status";
	
	public UserRecord(String user, String status) {
		setAttribute(USER, user);
		setAttribute(STATUS, status);
	}
	
	public String getUser() {
		return getAttribute(USER);
	}
	
	public String getStatus() {
		return getAttribute(STATUS);
	}

Here is the CSS:

.test-DialogListGridBody {
	background-color: #474747 !important;
}

.test-DialogListGrid .test-gridHeaderBar{
	background-color: #474747;
	border-top: 2px solid #E0E0E0;
	border-bottom: 2px solid #E0E0E0;
	border-left: 1px solid #E0E0E0;
	border-right: 1px solid #E0E0E0;
}

.test-dialog .test-DialogListGrid .test-gridHeaderButton,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonSelected,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonDisabled,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonSelectedDisabled,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonOver,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonDown,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonSelectedOver,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonSelectedDown {
    background-color: #474747;
    font-weight: bold;
    color: white;
}

.test-dialog .test-DialogListGridFutureCell, 
.test-dialog .test-DialogListGridFutureCellDark, 
.test-dialog .test-DialogListGridFutureCellOver, 
.test-dialog .test-DialogListGridFutureCellOverDark,
.test-dialog .test-DialogListGridFutureCellSelected, 
.test-dialog .test-DialogListGridFutureCellSelectedDark, 
.test-dialog .test-DialogListGridFutureCellSelectedOver, 
.test-dialog .test-DialogListGridFutureCellSelectedOverDark,
.test-dialog .test-DialogListGridFutureCellDisabled, 
.test-dialog .test-DialogListGridFutureCellDisabledDark {
	border-left: 1px solid rgb(228,242,255);
    border-right: 1px solid rgb(200,204,208);
    color: white;
    background-color: #474747;
}

.test-dialog .test-DialogListGrid .test-gridHeaderButtonOver,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonDown,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonSelectedOver,
.test-dialog .test-DialogListGrid .test-gridHeaderButtonSelectedDown {
    border-left: 1px solid rgb(228,242,255);
    border-right: 1px solid rgb(200,204,208);
    color: white;
    background-color: #474747;
}

.test-dialog .test-DialogListGridCell,
.test-dialog .test-DialogListGridtallCell,
.test-dialog .test-DialogListGridTallCell,
.test-dialog .test-DialogListGridFutureCell {
	border-bottom: 1px solid #5f6063; border-top: 1px solid #5f6063;
	background-color: #474747;
	color: white;
}

.test-dialog .test-DialogListGridCellDark,
.test-dialog .test-DialogListGridtallCellDark,
.test-dialog .test-DialogListGridTallCellDark,
.test-dialog .test-DialogListGridFutureCellDark {
	border-bottom: 1px solid #c0c0c0; border-top: 1px solid #c0c0c0;
	background-color: #575757;
	color: white;
}
	
.test-dialog .test-DialogListGridCellOver, 
.test-dialog .test-DialogListGridtallCellOver,
.test-dialog .test-DialogListGridCellOverDark, 
.test-dialog .test-DialogListGridtallCellOverDark {
	border-bottom: 1px solid #c0c0c0; border-top: 1px solid #c0c0c0;
	background-color: #575757;
	color: white;
}

.test-dialog .test-DialogListGridCellSelected, 
.test-dialog .test-DialogListGridtallCellSelected,
.test-dialog .test-DialogListGridCellSelectedDark, 
.test-dialog .test-DialogListGridtallCellSelectedDark {
	border-bottom: 1px solid #c0c0ff; border-top: 1px solid #c0c0ff;
	background-color: #79baf9;
	color: white;
}

.test-dialog .test-DialogListGridCellSelectedOver, 
.test-dialog .test-DialogListGridFutureCellSelectedOver,
.test-dialog .test-DialogListGridCellSelectedOverDark, 
.test-dialog .test-DialogListGridFutureCellSelectedOverDark {
	border-bottom: 1px solid #a0a0a0; border-top: 1px solid #a0a0a0;
	background-color: #79baf9;
	color: white;
}

.test-dialog .test-DialogListGridCellDisabled, .test-DialogListGridFutureCellDisabled {
	border-bottom: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	background-color: #ffffff;
}

.test-dialog .test-DialogListGridCellDisabledDark, .test-DialogListGridFutureCellDisabledDark {
	border-bottom: 1px solid #f0f0e8;
	border-top: 1px solid #f0f0e8;
	background-color: #f0f0e8;
}

.test-dialog .test-DialogHeaderBarTitle {
	background-color: #474747;
	color: white;
	font-style: bold;
}

.test-dialog {
	background: silver;
}

Is there a way to make it work on IE9 Quirk mode?

NOTE:See the attached screen-shot.

[Isomorphic]

You should use standards mode with IE9 at least. See the FAQ- unfortunately Microsoft has made some choices that force this inconvenient choice.

Your screenshots seem to be reversed - at least to us, the strict mode one looks a lot better.

It looks like you've done some customization of the tallBaseStyle but your only call is to setBaseStyle(). That might be the issue, but it should be an issue on all browsers.

[akhader]

Thanks Isomorphic for the response.

Actually if you run the sample application and change the document mode to "Quirk" you will get the same result as in the picture.

If I changed the "IE9 Standard" mode other components will be corrupted like the TreeGrid as an example.

[akhader]

The correct behavior which is appear in the Firefox and IE9 Standard mode, why it appears different in the "Quirk mode"? I want the Quirk mode to have the same appearance as in the Firefox and and IE9 standard modes, I took all the styles from "skin_styles.css".

BTW why in the IE9 standard mode the height of the CELL and the Images size is different?

[Isomorphic]

Please take a closer look at our previous response:

1. the screenshots appear to be reversed. Which one is actually desired appearance?

2. a different series of CSS styles is used depending on the browser's capabilities. See the docs for tallBaseStyle vs baseStyle

[akhader]

The Style in the the Firefox and IE9 Standard mode is the correct appearance.