Row/Column header highlight color

I've used the the following to change the color of the column/row header.

.active-scroll-top .active-box-item {background: #ccff99}
.active-scroll-left .active-box-item {background: #ffcc99}
.active-scroll-corner .active-box-item {background: #ff99cc}

I noticed that the headers were still highlighted with a light gray color. How do I change the color of this highlight?

Try the following example andy,
I am sure you will get

<html>
<head>
<style>
.active-box-item {background: #ccff99}
.active-box-item {background: #ffcc99}
.active-box-item {background: #ff99cc}
</style>
</head>
<body>
<table>
<tr>
<th class="active-box-item">eno </th>
<th class="active-box-item">name </th>
<th class="active-box-item">marks </th>
</tr>
<tr>
<td >101 </td>
<td >veeru </td>
<td >80 </td>
</tr>
<tr>
<td >102 </td>
<td >jyostna </td>
<td >80 </td>

</tr>

</table>
</body>

Here is the part of CSS that deals with mouse over/down color changes:

.active-header-over {

    border-color: #f9b119;

    background: #fcc247!important;

}



.active-header-over .active-box-item {

    border-color: #f9a900;

    background: #faf9f4;

}



.active-header-over .active-box-resize {

    background: none;

}



.active-header-pressed {

    border-color: threeddarkshadow threedhighlight threedhighlight threeddarkshadow;

}



.active-header-pressed .active-box-item {

    position: relative;

    left: 1px;

    top: 1px;

    border-color: threedface;

}

note, that the header consists of two nested DIVs, inner one is marked with .active-box-item tag.

Also sometimes it is necessary to use !important to override/fix selector bugs.

Forum search