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

[Solved] Content shifting around when using IE.

3 Answers 101 Views

General Discussions

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

Matthew Timbs asked on 30 Nov 2009, 04:25 PM

Several folks here where I work have issues with content shifting around in Internet Explorer. I have examples of it happening when mousing over elements (like buttons) and when clicking on buttons. I've come up with an example project to show it happening.

Here's the .aspx:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager AsyncPostBackTimeout="36000" ID="scriptManager1" runat="server" 
        
                    EnableTheming="True">  
        
                </telerik:RadScriptManager> 
        
                <telerik:RadFormDecorator ID="changeCheckboxes" runat="server" DecoratedControls="CheckBoxes,RadioButtons, Buttons" /> 
        
                <div> 
        
                    <asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">  
        
                        <ContentTemplate> 
        
                            <div style="margin: 10px;">  
        
                                <span>Choose one of these</span> 
        
                                <asp:Table ID="userTable" runat="server" CellPadding="3" CellSpacing="0" Width="700px" 
        
                                    BackColor="White" GridLines="Vertical" BorderStyle="Solid" BorderColor="#6693CF" 
        
                                    BorderWidth="1">  
        
                                    <asp:TableRow ID="facilityRow" runat="server">  
        
                                        <asp:TableCell Width="150px">blah*</asp:TableCell> 
        
                                        <asp:TableCell Width="450px">  
        
                                            <telerik:RadComboBox ID="facilityRadComboBox" runat="server" Width="250px" Height="150px">  
        
                                                <Items> 
        
                                                    <telerik:RadComboBoxItem Text="Select One" Value="" /> 
        
                                                    <telerik:RadComboBoxItem Text="red" Value="1" /> 
        
                                                    <telerik:RadComboBoxItem Text="thursday" Value="2" /> 
        
                                                    <telerik:RadComboBoxItem Text="grizzly" Value="3" /> 
        
                                                    <telerik:RadComboBoxItem Text="sad" Value="4" /> 
        
                                                </Items> 
        
                                            </telerik:RadComboBox> 
        
                                            <asp:RequiredFieldValidator ID="facilityRequiredFieldValidator" runat="server" ControlToValidate="facilityRadComboBox" 
        
                                                Display="Dynamic" ErrorMessage="<br />This field is required" InitialValue="Select One" /> 
        
                                        </asp:TableCell></asp:TableRow> 
        
                                </asp:Table> 
        
                            </div> 
        
                            <div style="margin: 10px;">  
        
                                <span>Now choose one of these</span> 
        
                                <asp:Table ID="Table1" runat="server" CellPadding="3" CellSpacing="0" Width="700px" 
        
                                    BackColor="White" GridLines="Vertical" BorderStyle="Solid" BorderColor="#6693CF" 
        
                                    BorderWidth="1">  
        
                                    <asp:TableRow ID="TableRow1" runat="server">  
        
                                        <asp:TableCell Width="150px">duh*</asp:TableCell> 
        
                                        <asp:TableCell Width="450px">  
        
                                            <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="250px" AutoPostBack="true" 
        
                                    Height="150px" onselectedindexchanged="RadComboBox1_SelectedIndexChanged">  
        
                                                <Items> 
        
                                                    <telerik:RadComboBoxItem Text="Select One" Value="" /> 
        
                                                    <telerik:RadComboBoxItem Text="november" Value="1" /> 
        
                                                    <telerik:RadComboBoxItem Text="farkle" Value="2" /> 
        
                                                    <telerik:RadComboBoxItem Text="verdant" Value="3" /> 
        
                                                    <telerik:RadComboBoxItem Text="carp" Value="4" /> 
        
                                                </Items> 
        
                                            </telerik:RadComboBox> 
        
                                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="RadComboBox1" 
        
                                                Display="Dynamic" ErrorMessage="<br />This field is required" InitialValue="Select One"/>  
        
                                        </asp:TableCell></asp:TableRow> 
        
                                </asp:Table> 
        
                            </div>     
        
                            <div style="margin: 10px;">  
        
                                <span>You Picked</span> 
        
                                <asp:TextBox ID="first" runat="server" /> 
        
                                <asp:TextBox ID="second" runat="server" /> 
        
                                <asp:Button ID="Button1" runat="server" onclick="Button1_Click"   
        
                                    Text="Click Me" /> 
        
                            </div>               
        
                        </ContentTemplate> 
        
                    </asp:UpdatePanel> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

And here's the codebehind

    
            using System;  
        
            using System.Collections.Generic;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            public partial class _Default : System.Web.UI.Page   
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void RadComboBox1_SelectedIndexChanged(object o, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)  
        
                {  
        
                }  
        
                protected void Button1_Click(object sender, EventArgs e)  
        
                {  
        
                    first.Text = facilityRadComboBox.SelectedItem.Text;  
        
                    second.Text = RadComboBox1.SelectedItem.Text;  
        
                }  
        
            }

choose options in the two drop down lists and then click the button. You'll see the entire page contents shift downward in IE but not in Firefox.

The actual example in my real code shifts when I mouse over the button..

thanks...

--Matt

[Solved] Content shifting around when using IE.

3 Answers, 1 is accepted