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

[Solved] Grid positioning CSS problem IE7

3 Answers 113 Views

Grid

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

Andreas asked on 30 Nov 2009, 12:09 PM

Hi All,

I have a page with cross-browser support

<form id="form1" runat="server">
     <script language="javascript" type="text/javascript">

         if (navigator.userAgent.indexOf('MSIE') != -1) {

           // alert("IE");

             document.write('<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.ie7.css" mce_href="CSS/StyleSheet.ie7.css" />')
         }

         else {
           // alert("firefox");
             document.write('<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.firefox.css" mce_href="CSS/StyleSheet.firefox.css" />')

         }

</script>

using 2 different style sheets.

FF:

.tableDruckauftrag
{
   position: absolute;
   top: 250px;
   left: 203px;
   right: 113px;
}

IE:

.tableDruckauftrag
{
   position: absolute;
   top: 10px;
   left: 10px;
   display: inline;

}

Grid:

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1"
                    GridLines="None" AllowMultiRowSelection="True" Skin="Web20"
                    AllowPaging="True" AutoGenerateColumns="False" CssClass="tableDruckauftrag"
                    PageSize="5" ShowFooter="True" AllowCustomPaging="True">
<MasterTableView datakeynames="AuftragsnummerID"
                        datasourceid="SqlDataSource1">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

    <Columns>
        <telerik:GridBoundColumn DataField="AuftragsnummerID" DataType="System.Int32"
            HeaderText="Auftragsnummer" ReadOnly="True" SortExpression="AuftragsnummerID"
            UniqueName="AuftragsnummerID">
            <HeaderStyle Width="20px" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Datum" HeaderText="Datum"
            SortExpression="Datum" UniqueName="Datum" DataType="System.DateTime">
            <HeaderStyle Width="20px" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="EmpfaengerFirma"
            HeaderText="Firma" SortExpression="EmpfaengerFirma"
            UniqueName="EmpfaengerFirma">
            <HeaderStyle Width="30px" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="EmpfaengerStadt" HeaderText="Ort"
            SortExpression="EmpfaengerStadt" UniqueName="EmpfaengerStadt">
            <HeaderStyle Width="30px" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="AnzahlPakete" HeaderText="Kuchen"
            SortExpression="AnzahlKuchen" UniqueName="AnzahlKuchen">
            <HeaderStyle Width="15px" />
        </telerik:GridBoundColumn>
        <telerik:GridCheckBoxColumn DataField="LabelDrucken" DataType="System.Boolean"
            HeaderText="Kuchen" SortExpression="Kuchen"
            UniqueName="Kuchen" Visible="False">
            <HeaderStyle Width="10px" />
        </telerik:GridCheckBoxColumn>
        <telerik:GridClientSelectColumn Text="Drucken" UniqueName="column">
        </telerik:GridClientSelectColumn>
    </Columns>
    <PagerStyle PagerTextFormat="" />
</MasterTableView>
                    <ClientSettings>
                        <Selecting AllowRowSelect="True" />
                    </ClientSettings>
                </telerik:RadGrid>

Every Telerik control is positioned well, but not the Grid. It is positioned well in FF, but not in IE7.

I have tried a lot to solve it over the last days but I am failing. The problem is that once I am changing something in the FF CSS it results in changes in IE and vice versa.

I am struggeling with the desing-time mode of the Grid. Only moving it manually in design-time helps positioning it in IE

Any hints are very much appreciated.

Best wishes

Andi

3 Answers, 1 is accepted

answered on 30 Nov 2009, 04:10 PM

Hi Dimo,

many thanks for your quick reply.

I was double checking. The issue is that with all sites where there is no RadGrid, there are no issues and all Telerik controls are rendered properly in both browsers.

Once it comes to RadGrid, all controls "above" (i.e. above the RadGrid) are rendered properly and the RadGrid itself and everything below is positioned wrong. But this is only in IE7. Firefox works fine.

I think that maybe the Skin of the RadGrid conflicts with the CSS?!

Anyway, if my registering of the CSS files is wrong, could you please let me know what is the best way to achieve this?

I am using

<form id="form1" runat="server">
     <script language="javascript" type="text/javascript">

         if (navigator.userAgent.indexOf('MSIE') != -1) {

           // alert("IE");

             document.write('<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.ie7.css" mce_href="CSS/StyleSheet.ie7.css" />')
         }

         else {
           // alert("firefox");
             document.write('<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.firefox.css" mce_href="CSS/StyleSheet.firefox.css" />')

         }

</script>

Best wishes and many thanks

Andi

answered on 01 Dec 2009, 08:31 AM

Hi Andreas,

The problem may also be caused by invalid HTML (e.g. unclosed tags) or CSS (wrong syntax). Please validate both.

Generally, conflicting CSS styles and layout issues are easily researched with tools such as Firebug. You can also try removing controls / styles from the page in order to isolate the problem.

If you need further assistance, you should send us a full runnable sample page, as the provided information is insufficient.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.