Yii’s default CSS file – Blueprint’s screen.css – has a style that defines the background color of even row cells in a table. That reads …
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
This might be a nice trick for rendering tables in general, but it blocks the gridView widgets and the detailView widgets to be rendered properly in FireFox and in Chrome.
The CSS file for the gridView widget reads
.grid-view table.items tr.even
{
background: #F8F8F8;
}
...
.grid-view table.items tr.selected
{
background: #BCE774;
}
.grid-view table.items tr:hover
{
background: #ECFBD4;
}
And the one for the detailView widget
table.detail-view tr.even
{
background:#F8F8F8;
}
They are not applied in the rendering of the even rows of a table with FireFox and Chrome.
Meanwhile, IEs behave differently and they render those widgets as expected, although I don’t know whether it is the proper interpretation of the CSS or not.
And one of the easiest workarounds may be a change in Buleprint’s screen.css like the following
tbody tr:nth-child(even), tbody tr.even {background:#e5ecf9;}