PDA

View Full Version : Grid style css



j_mmontero
14 Jul 2010, 8:16 AM
I styled a grid with the following css:


.mygridclass .x-grid3-cell-first .x-grid3-hd-inner{
background: url(../images/back_hdr_img_left.png) no-repeat center left;
}
.mygridclass .x-grid3-cell-last .x-grid3-hd-inner{
background: url(../images/back_hdr_img_right.png) no-repeat center right;
}
.mygridclass .x-grid3-hd-inner{
height:28px;
}
.mygridclass .x-grid3-hd{
background: url(../images/back_hdr_img_center.png) repeat-x center;
color:white;
height: 35px;
}
.mygridclass td.x-grid3-hd-over .x-grid3-hd-inner, td.sort-desc .x-grid3-hd-inner, td.sort-asc .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner {
color: #000000;
background: no-repeat;
}
.mygridclass td.x-grid3-hd-over.x-grid3-cell-first .x-grid3-hd-inner {
background: url(../images/back_hdr_img_left.png) no-repeat center left;
}
.mygridclass .x-grid3-hd .x-grid3-cell .x-grid3-cell-first .sort-asc {
background: url(../images/back_hdr_img_left.png) no-repeat center left;
}
.mygridclass .x-grid3-cell-first.x-grid3-hd-btn {
background:url(../images/grid3-hd-btn2.png) no-repeat center right;
}
.mygridclass .x-grid3-cell-last.x-grid3-hd-btn {
background:url(../images/grid3-hd-btn2-last.png);
}
.mygridclass .x-grid3-hd-btn {
background:url(../images/grid3-hd-btn2.png) no-repeat center right;
}
.mygridclass td.x-grid3-hd-over.x-grid3-cell-last .x-grid3-hd-inner .x-grid3-hd-btn {
background: url(../images/grid3-hd-btn2-last.png) no-repeat center right;
}
/* Row Selected */

.mygridclass .x-grid3-row-selected{
background: url(../images/stripe_row_sel_back.png) center repeat-x !important;
}
.mygridclass .x-grid3-row-selected .x-grid3-cell-first{
background: url(../images/stripe_orange_first_row.png) no-repeat center left !important;
}
.mygridclass .x-grid3-row-selected .x-grid3-cell-last {
background: url(../images/stripe_orange_last_row.png) no-repeat center right !important;
}


/* Normal rows */
.mygridclass .x-grid3-row .x-grid3-cell-first{
background: url(../images/stripe_white_first_row.png) no-repeat center left;
}
.mygridclass .x-grid3-row .x-grid3-cell-last {
background: url(../images/stripe_white_last_row.png) no-repeat center right;
}
.mygridclass .x-grid3-row {
background: url(../images/grid_white_cell_back.png) repeat-x;
}


/* Stripe Rows */
.mygridclass .x-grid3-row-alt .x-grid3-cell-first{
background: url(../images/stripe_first_row.png) no-repeat center left;
}
.mygridclass .x-grid3-row-alt .x-grid3-cell-last {
background: url(../images/stripe_last_row.png) no-repeat center right;
}
.mygridclass .x-grid3-row-alt {
background: url(../images/grid_cell_back.png) repeat-x;
}
.mygridclass .x-grid3-row td, .x-grid3-summary-row td {
height:34px;
}I created set of images to styles the rows. One for the normal rows and the other for the stripe rows.

When I select the normal row the css is well applied, but I cannot figure out how to use the css to apply for the stripe row keeping the same background.

I mean if I select a stripe row I want the stripe row background image with a orange border around it to be displayed.

I tried to do something like this :

.mygridclass .x-grid3-row-selected.x-grid3-row.x-grid3-row-alt{
background: url(../images/grid_orange_cell_back.png) center repeat-x !important;
}
.mygridclass .x-grid3-row-selected.x-grid3-row-alt .x-grid3-cell-first{
background: url(../images/stripe_orange_alt_first_row.png) no-repeat center left !important;
}
.mygridclass .x-grid3-row-selected.x-grid3-row-alt .x-grid3-cell-last {
background: url(../images/stripe_orange_alt_last_row.png) no-repeat center right !important;
}but did not worked.

Any input will be appreciated!
Thanks,

j_mmontero
14 Jul 2010, 1:17 PM
This css rule works on FF, but not IE7


/* Row Stripe Selected */
.mygridcls .x-grid3-row-alt.x-grid3-row-selected{
background: url(../images/grid_orange_cell_back.png) center repeat-x;
} I found on the web this article:
http://iamtotti.com/blog/2010/02/ie-and-css-class-chaining/

j_mmontero
15 Jul 2010, 7:09 AM
I gave up !

The only thing I could do to fix it in IE7 is to display the same background image when the row is selected.

Looks like is not possible to have a different background image in IE with stripe rows.

If anybody found a solution, please post it on this thread.

Thanks for bearing with me!