Background color for 2nd level in hierarchical grid - IE8

[Craig Hauzie]

I'm trying to set the background in the 2nd level of a hierarchical grid that is also using a Custom skin. I've seen the other threads about using the !important attribute on the CSS class but that isn't working for IE8. Everything renders fine in Firefox (even without the !important) but for some reason IE8 doesn't allow me to do it.

What's really weird is on my localhost -- it works fine but when I move it to our Dev/Test/Production environments -- it doesn't work.

Thanks

[Dimo]

Hello Craig,

The provided information is not enough to provide any specific advice. Please check and validate your CSS and HTML code. You can also use the IE8 web developer toolbar to diagnose the CSS issue. If the problem persists, please send a demo.

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Craig Hauzie]

Hello. Thanks for the quick reply.

More details:
--> I copied the Vista skin and created my own skin called VistaCustom.
--> I've modified my Grid.VistaCustom.css file to add a background color and padding to the 2nd level grid.
--> I've attached some images of the renderings too.

<telerik:RadGrid ID="gvSelectTransactionsFixed" runat="server" AllowMultiRowSelection="true" EnableEmbeddedSkins="false" Skin="VistaCustom">
    <ClientSettings EnableRowHoverStyle="true">
            <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView DataKeyNames="TopLevelTransactionID" AutoGenerateColumns="false" HierarchyLoadMode="ServerBind" ShowHeader="true">
         <Columns>
            <telerik:GridClientSelectColumn ItemStyle-Width="20"></telerik:GridClientSelectColumn>
            <telerik:GridBoundColumn DataField="PolicyNo" HeaderText="Policy No" UniqueName="PolicyNo"></telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="PeriodDate" HeaderText="Period Date" UniqueName="PeriodDate"></telerik:GridDateTimeColumn>
            <telerik:GridNumericColumn DataField="Premium" HeaderText="Premium" UniqueName="Premium"></telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="Commission" HeaderText="Commission" UniqueName="Commission"></telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="ReturnPremium" HeaderText="Return Prem" UniqueName="ReturnPremium"></telerik:GridNumericColumn>
            <telerik:GridNumericColumn DataField="ReturnCommission" HeaderText="Return Comm" UniqueName="ReturnCommission"></telerik:GridNumericColumn>
        </Columns>
        <DetailTables>
            <telerik:GridTableView DataKeyNames="TopLevelTransactionID" AllowSorting="false" AlternatingItemStyle-BackColor="White" AutoGenerateColumns="false" ItemStyle-BackColor="White" Name="ChildView" ShowHeader="true" >
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="TopLevelTransactionID" MasterKeyField="TopLevelTransactionID" />
                </ParentTableRelation>
                <Columns>
                    <telerik:GridBoundColumn DataField="CategoryDescription" HeaderText="Category"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Subcategory" HeaderText="Subcategory" ></telerik:GridBoundColumn>
                    <telerik:GridNumericColumn DataField="Amount" HeaderText="Amount" UniqueName="Amount"></telerik:GridNumericColumn>
                    <telerik:GridNumericColumn DataField="PreviousApplied" HeaderText="Previous Applied" UniqueName="PreviousApplied"></telerik:GridNumericColumn>
                </Columns>
            </telerik:GridTableView>
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

/*hierarchy*/

.RadGrid_VistaCustom .rgDetailTable
{
    background: #fff9cd;
    border-color:#ededed;
    padding: 15px;
}

[Craig Hauzie]

I ended up fixing this myself but there is still a problem with IE8 recognizing the "padding" attibute of a CSS class in a 2nd level hierarchical grid.

I figured out that the 2nd level was recognizing a border just fine so I made a 15px border and accomplished the same thing.

/* hierarchy */

.RadGrid_VistaCustom .rgDetailTable
{
    border: solid 15px #fff9cd
}

[Dimo]

Hi Craig,

<table> elements cannot have a padding, but they can have margin. Table cells can have padding, but no margin.

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.