This is a migrated thread and some comments may be shown as answers.

Text Grid for IE, Firefox and Netscape

1 Answer 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Timothy Hays
Top achievements
Rank 1
Timothy Hays asked on 30 Sep 2008, 05:14 PM
I am using a modified verion of Default2006 skin in order to skin my grid.  Problem is that it looks fine in IE, but looks horrible in Firefox and Netscape.  This is a text only grid.  The only unusual things are that it uses a scrollbar and a static header. 

Here is my CSS file:

/* Telerik RadGrid APRDefault Skin */

/*global*/

.RadGrid_APRDefault

{

background:white;

color:#000000;

scrollbar-face-color:#E9E9E9;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#E9E9E9;

scrollbar-3dlight-color:#DBDBDB;

scrollbar-arrow-color:#787878;

scrollbar-track-color:#F5F5F5;

scrollbar-darkshadow-color:#AEAEAE;

}

.RadGrid_APRDefault

,

.MasterTable_APRDefault

,

.DetailTable_APRDefault

,

.GroupPanel_APRDefault

table,

.GridEditForm_APRDefault

table

{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #000000;

border: solid 1px #999999;

}

.MasterTable_APRDefault

{

border-collapse:collapse;

background-color: #000066;

}

.RadGrid

{

border-collapse:collapse;

background-color: #000066;

border: solid 1px #999999;

}

.GridRow_APRDefault

td,

.GridAltRow_APRDefault

td,

.GridEditRow_APRDefault

td,

.GridFooter_APRDefault

td,

.GridGroupFooter_APRDefault

td,

.GridFilterRow_APRDefault

td,

.GroupHeader_APRDefault

td,

.GridHeader_APRDefault

,

.ResizeHeader_APRDefault

{

padding-left:3px;

padding-right:3px;

border-right: solid 1px #999999;

}

.RadGrid_APRDefault

.rgAdd,

.RadGrid_APRDefault

.rgRefresh,

.RadGrid_APRDefault

.rgEdit,

.RadGrid_APRDefault

.rgDel,

.RadGrid_APRDefault

.rgFilter,

.RadGrid_APRDefault

.rgPagePrev,

.RadGrid_APRDefault

.rgPageNext,

.RadGrid_APRDefault

.rgExpand,

.RadGrid_APRDefault

.rgCollapse,

.RadGrid_APRDefault

.rgSortAsc,

.RadGrid_APRDefault

.rgSortDesc,

.RadGrid_APRDefault

.rgUpdate,

.RadGrid_APRDefault

.rgCancel

{

width:16px;

height:16px;

border:0;

padding:0;

background-color:transparent;

background-image:url('Grid/sprite.gif');

background-repeat:no-repeat;

vertical-align:middle;

cursor:pointer;

}

.GroupPanelItems_APRDefault

input,

.GridCommandRow_APRDefault

img,

.GridHeader_APRDefault

input,

.GridFilterRow_APRDefault

img,

.GridPager_APRDefault

img

{

vertical-align:middle;

}

/*header*/

.GridHeaderDiv_APRDefault

{

width: 100%;

/* margin-right: 15px; */

padding-right: 22px;

background-color: #000066;

}

.GridHeaderDiv_APRDefault

table

{

width: 100%;

}

.GridDataDiv_APRDefault

table

{

}

.GridHeader_APRDefault

,

.ResizeHeader_APRDefault

{

padding-top:6px;

padding-bottom:6px;

background:#ececec url('Grid/sprite.gif') 0 0 repeat-x;

text-align: center;

}

.GridHeader_APRDefault

a

{

color: White;

text-decoration: underline;

}

/*rows*/

.GridRow_APRDefault

td,

.GridAltRow_APRDefault

td,

.GridEditRow_APRDefault

td,

.GridFooter_APRDefault

td,

.GridGroupFooter_APRDefault

td

{

padding-top:5px;

padding-bottom:5px;

}

.GridRow_APRDefault

td,

.GridAltRow_APRDefault

td,

.GridFooter_APRDefault

td,

.GridGroupFooter_APRDefault

td

{

}

.GridRow_APRDefault

a,

.GridAltRow_APRDefault

a,

.GridEditRow_APRDefault

a,

.GridFooter_APRDefault

a,

.GridGroupFooter_APRDefault

a,

.GridEditForm_APRDefault

a

{

color:#000;

}

.GridAltRow_APRDefault

{

background-color: #cfd1e9;

}

.GridRow_APRDefault

{

background-color: #e3e4f2;

}

 

.SelectedRow_APRDefault

{

background:#008A8C;

}

.SelectedRow_APRDefault

td

{

}

.GridRowOver_APRDefault

,

.ActiveRow_APRDefault

{

background:#fff;

}

.GridEditRow_APRDefault

{

background:#ffffe1;

}

.GridEditRow_APRDefault

td

{

}

/*footer*/

.GridFooterDiv_APRDefault

,

.GridFooter_APRDefault

,

.GridGroupFooter_APRDefault

{

background:#CCCCCC;

color:#000;

}

/*status*/

.GridPager_APRDefault

span

{

color:#999;

}

/*pager*/

.GridPager_APRDefault

{

background:#fff;

color:#666;

line-height:22px;

}

.GridPager_APRDefault

td

{

padding:2px 4px;

}

.GridPager_APRDefault

div span,

.GridPager_APRDefault

a,

.GridPager_APRDefault

.sliderPagerLabel_APRDefault

{

color:#666;

}

.GridPager_APRDefault

a:hover

{

color:#000;

}

.PagerLeft_APRDefault

{

float:left;

}

.PagerRight_APRDefault

{

float:right;

}

.PagerCenter_APRDefault

{

text-align:center;

}

.PagerCenter_APRDefault

span

{

vertical-align:middle;

}

.RadGrid_APRDefault

.rgPagePrev

{

background-position:3px -727px;

}

.RadGrid_APRDefault

.rgPageNext

{

background-position:5px -759px;

}

/*sorting, reordering*/

.GridHeader_APRDefault

.rgSortAsc

{

background-position:-21px -630px;

height:10px;

}

.GridHeader_APRDefault

.rgSortDesc

{

background-position:4px -629px;

height:10px;

}

.TopReorderIndicator_APRDefault

,

.BottomReorderIndicator_APRDefault

{

width:11px !important;

height:11px !important;

margin-left:-5px;

background:url('Grid/sprite.gif') 0 -600px no-repeat;

}

.BottomReorderIndicator_APRDefault

{

background-position:-21px -600px;

}

/*filtering*/

.GridFilterRow_APRDefault

{

background:#fcfcfc;

}

.GridFilterRow_APRDefault

td

{

padding-top:4px;

padding-bottom:4px;

}

.RadGrid_APRDefault

.rgFilter

{

background-position:2px -789px;

}

.GridFilterRow_APRDefault

input[type="text"]

{

padding:2px;

font:11px arial,sans-serif;

color:#424242;

vertical-align:middle;

}

/*grouping*/

.GroupPanel_APRDefault

{

background:#e5e5e5;

}

.GroupPanel_APRDefault

.rgSortAsc

{

background-position:-21px -627px;

}

.GroupPanel_APRDefault

.rgSortDesc

{

background-position:4px -626px;

}

.GroupPanel_APRDefault

td

{

padding:2px 3px;

}

.GroupPanel_APRDefault

td td

{

padding:1px;

}

.GroupPanelItems_APRDefault

{

padding:1px 2px 1px 5px;

background:#efefef;

color:#999;

white-space:nowrap;

}

.GroupHeader_APRDefault

{

background:#fff;

}

.GroupHeader_APRDefault

td

{

padding-top:5px;

padding-bottom:5px;

}

.RadGrid_APRDefault

.rgExpand

{

background-position:2px -822px;

}

.RadGrid_APRDefault

.rgCollapse

{

background-position:2px -854px;

}

.GroupHeader_APRDefault

td div

{

top:-0.6em;

}

.GroupHeader_APRDefault

td div div

{

top:0;

}

/*editing*/

.GridEditForm_APRDefault

{

}

.GridEditForm_APRDefault

input[type="text"],

.GridEditForm_APRDefault

input[type="password"],

.GridEditForm_APRDefault

textarea

{

padding:2px;

font:11px arial,sans-serif;

color:#424242;

}

.RadGrid_APRDefault

.rgUpdate

{

background-position:2px -981px;

}

.RadGrid_APRDefault

.rgCancel

{

background-position:2px -1013px;

}

/*hierarchy*/

.DetailTable_APRDefault

{

}

/*command row*/

.GridCommandRow_APRDefault

{

background:#f3f3f3;

}

.GridCommandRow_APRDefault

a

{

color:#000;

}

.RadGrid_APRDefault

.rgAdd

{

background-position:2px -1046px;

}

.RadGrid_APRDefault

.rgRefresh

{

background-position:5px -885px;

}

.RadGrid_APRDefault

.rgEdit

{

background-position:2px -918px;

}

.RadGrid_APRDefault

.rgDel

{

background-position:2px -951px;

}

/*multirow select*/

.GridRowSelector_APRDefault

{

background:#669 !important;

}

/*row drag n drop*/

.GridItemDropIndicator_APRDefault

{

}

/*rtl*/

.RadGridRTL_APRDefault

.GridHeader_APRDefault,

.RadGridRTL_APRDefault

.ResizeHeader_APRDefault

{

text-align:right;

}

.RadGridRTL_APRDefault

.PagerLeft_APRDefault,

.RadGridRTL_APRDefault

.GridPager_APRDefault .radslider

{

float:right;

}

.RadGridRTL_APRDefault

.PagerRight_APRDefault

{

float:left;

}



and here is my HTML

<div id="divBatchListSection" style="margin-left: 5px; margin-right: 7px; margin-top: 10px;">

 

<telerik:RadGrid ID="dtgManageBatchList" runat="server" GridLines="Vertical" Width="100%"

 

Height="130px" AutoGenerateColumns="False" ShowStatusBar="True" DataSourceID="dtsBatchList" EnableEmbeddedSkins="False" Skin="APRDefault">

 

<MasterTableView DataSourceID="dtsBatchList" AllowSorting="True">

 

<RowIndicatorColumn>

 

<HeaderStyle Width="20px" />

 

</RowIndicatorColumn>

 

<ExpandCollapseColumn>

 

<HeaderStyle Width="20px" />

 

</ExpandCollapseColumn>

 

<Columns>

 

<telerik:GridTemplateColumn UniqueName="colSelected" >

<ItemTemplate>

<asp:CheckBox ID="Selected" />

 

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="BatchName" HeaderText="Batch Name" SortExpression="BatchName" UniqueName="BatchName">

 

</telerik:GridBoundColumn>

 

<telerik:GridBoundColumn DataField="OriginalFileName" HeaderText="Original File" SortExpression="OriginalFileName" UniqueName="OriginalFileName">

 

</telerik:GridBoundColumn>

 

<telerik:GridBoundColumn DataField="CreatedBy" HeaderText="Created By" SortExpression="CreatedBy" UniqueName="CreatedBy">

 

</telerik:GridBoundColumn>

 

<telerik:GridBoundColumn DataField="CreatedDate" DataType="System.DateTime" HeaderText="Created Date" SortExpression="CreatedDate" UniqueName="CreatedDate">

 

</telerik:GridBoundColumn>

 

<telerik:GridBoundColumn DataField="ValidRecords" DataType="System.Int32" HeaderText="Valid Records" ReadOnly="True" SortExpression="ValidRecords" UniqueName="ValidRecords">

 

</telerik:GridBoundColumn>

 

<telerik:GridBoundColumn DataField="InvalidRecords" DataType="System.Int32" HeaderText="Invalid Records" ReadOnly="True" SortExpression="InvalidRecords" UniqueName="InvalidRecords">

 

</telerik:GridBoundColumn>

 

<telerik:GridBoundColumn DataField="TotalRecords" DataType="System.Int32" HeaderText="Total Records" ReadOnly="True" SortExpression="TotalRecords" UniqueName="TotalRecords">

 

</telerik:GridBoundColumn>

 

<telerik:GridBoundColumn DataField="CorrectedRecords" DataType="System.Int32" HeaderText="Corrected Records" ReadOnly="True" SortExpression="CorrectedRecords" UniqueName="CorrectedRecords">

 

</telerik:GridBoundColumn>

 

</Columns>

 

<EditFormSettings>

 

<EditColumn CancelImageUrl="Cancel.gif" EditImageUrl="Edit.gif" InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif">

 

</EditColumn>

 

</EditFormSettings>

 

</MasterTableView>

 

<ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True">

 

<Selecting AllowRowSelect="True" />

 

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

 

</ClientSettings>

 

<FilterMenu EnableTheming="True">

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

</FilterMenu>

 

</telerik:RadGrid>

 

<asp:SqlDataSource ID="dtsBatchList" runat="server" ConnectionString="<%$ ConnectionStrings:APRWebDBConnectionString3 %>" SelectCommand="SELECT * FROM [vwBatches_Active]"></asp:SqlDataSource>

 

</div>

Is there another skin I should use as a default that is more compatible?  If not, do you have any idea how I could make this compatible with all three browsers?

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 01 Oct 2008, 02:38 PM
Hello Timothy,

You should not set any margin, padding, width and height styles to the .GridHeaderDiv_Skin CSS class, because the respective <div> element is very important for aligning header and data cells when scrolling with static headers is used. In addition, you should not set width to the <table> in this element.

I did not see anything else problematic in the skin and after I removed the following styles, RadGrid looks the same in all browsers on my side.


.GridHeaderDiv_APRDefault
{
    width:100%;
    /* margin-right: 15px; */
    padding-right: 22px;
    background-color: #000066;
}

.GridHeaderDiv_APRDefault table
{
    width: 100%;
}


Let us know if you need more information.


Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
Timothy Hays
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or