[CLOSED] mouse over CSS for grid paging toolbar.

[majestic]

hi,
i want to change mouse over color in grid paging toolbar. (firsr and previous).
i have changed CSS class and i got result for mozila and chrome but not in IE8+.

the folllowing class has been changed.

.x-btn-default-toolbar-small .x-btn-default-toolbar-small-over   .x-btn-default-toolbar-small-focus.x-btn-default-toolbar-small-menu-active, .x-btn-default-toolbar-small-pressed

.so please provide the solution for this.. ThanksMajestic

[Daniil]

Hi @majestic,

Please provide a simplified sample to reproduce and test.

[majestic]

Hi daniil,here is my working code. code works infirefox and chrome but not in IE 8..

<style type="text/css"> .x-grid-custom .x-grid-row TD { font : 12px/16px "segoe ui",arial,sans-serif; } .x-grid-custom .x-column-header { background : #718CA1 url(header_sprite.png) repeat scroll 0 bottom; font : 12px/16px "segoe ui",arial,sans-serif; height : 22px; border-left-color : #6085A5; border-right-color : #728BA1; } .x-grid-custom .x-column-header-over { background : #ebf3fd url(header_sprite_over.png) repeat 0 bottom !important; } .x-grid-custom .x-column-header div { color : white; } .x-grid-custom .company-link { color : #2d7cad; } .x-grid-custom .x-column-header-trigger { background : #718CA1 url(grid3-hd-btn.png) no-repeat left center; } .x-grid-custom .x-grid-row-alt { background-color : #DAE2E8; } .x-grid-custom .x-grid-row-over .x-grid-cell {     border-color : #728BA1; background : url(row-over.png); } .x-grid-custom .x-grid-row-selected .x-grid-cell { background : url(row-selected.png) repeat-x scroll 0 0 #7BBBCF; border-color : #728BA1; border-style : solid; } .x-grid-custom .x-grid-row-selected TD, .x-grid-custom .x-grid-row-selected TD .company-link { color : #fff; } .x-grid-custom .x-toolbar .x-toolbar-text { color : #fff !important; } .x-grid-custom .x-toolbar { background : url(toolbar-bg.png) repeat-x 0 0 !important; } .x-grid-custom .x-tbar-loading {     background-image : url(refresh.png) !important; } .x-grid-custom .x-tbar-page-first { background-image : url(page-first.gif) !important; } .x-grid-custom .x-tbar-page-last { background-image : url(page-last.gif) !important; } .x-grid-custom .x-tbar-page-next { background-image : url(page-next.gif) !important; } .x-grid-custom .x-tbar-page-prev { background-image : url(page-prev.gif) !important; } .x-grid-custom .x-paging-info { color : #fff; } .x-btn-default-toolbar-small { /*background-color: transparent; border-style: none; border-width: 0px;*/ padding: 3px;} .x-btn-default-toolbar-small-over { background-image:none; background-color:red; /*background :none;*/ border-color: #9D9D9D; } .x-btn-default-toolbar-small-focus { /*background-color: #F3F3F3;*/ background-image: -moz-linear-gradient(center top , red, green); border-color: #9D9D9D; } .x-btn-default-toolbar-small-menu-active, .x-btn-default-toolbar-small-pressed { /*background-color: #D6D6D6;*/ background-image: -moz-linear-gradient(center top , red, green); border-color: #9D9D9D;} </style>

[Daniil]

A button is rendered as HTML <table> in IE8.

It needs to apply another CSS.

Example

.x-btn-default-toolbar-small-over .x-btn-tl,
.x-btn-default-toolbar-small-over .x-btn-tr,
.x-btn-default-toolbar-small-over .x-btn-tc,
.x-btn-default-toolbar-small-over .x-btn-bl,
.x-btn-default-toolbar-small-over .x-btn-br,
.x-btn-default-toolbar-small-over .x-btn-bc,
.x-btn-default-toolbar-small-over .x-btn-ml,
.x-btn-default-toolbar-small-over .x-btn-mr,
.x-btn-default-toolbar-small-over .x-btn-mc {
    background-image: none !important;
    background-color: red !important;
}

[majestic]

Thanks Daiil,Its working fine.. Please close this thread..

Thanks

Majestic