Strange scroll behaviour in IE7

5 posts, 0 answers
  1. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 23 Jan 2009 Link to this post

    Hi,

    I have a very simple site with a masterpage.
    This site is just for demo purposes and some tests.

    It has a masterpage - and is AJAX enabled.

    Here the main layout

    <body style="background-color:#666699">  
        <center> 
            <form id="form1" runat="server">  
            <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">  
            </telerik:RadScriptManager> 
            <asp:SiteMapDataSource ID="dsSM" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" /> 
            <div style="height: 90px; width: 980px;">  
                <div style="height: 90px; width: 730px; float: left; background-color: Black;">  
                    <img src="/Images/Banner728x90.jpg" alt="House1 Main Banner" /> 
                </div> 
                <div style="height: 90px; width: 250px; float: left; background: Orange;">  
                </div> 
            </div> 
            <div style="height: 25px; width: 980px; background: DarkRed;">  
                <telerik:RadMenu ID="rmMainAno" runat="server" Style="top: 0px; left: 0px; width: 980px" DataSourceID="dsSM">  
                    <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
                </telerik:RadMenu> 
            </div> 
            <div style="height: 600px; width: 980px; background: White; text-align: left">  
                <div style="height: 588px; width: 718px; float: left; overflow: auto; padding:6px 6px 6px 6px; ">  
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" /> 
                </div> 
                <div style="height: 600px; width: 250px; float: left; background-color: Maroon;">  
                </div> 
            </div> 
            <div style="height: 30px; width: 980px; text-align: left; background-color: Silver; padding-top: 3px;">  
                My Footer</div> 
            </form> 
        </center> 
    </body> 
     
    So I have a head with 2 areas.
    A navigation line with RadMenu.
    A content pane and on the right side a "news pane".
    On the bottom is some place for a footer.
    I guess a pretty common and normal layout.

    Everything works until it comes to the rotator.
    Here is the page - also very simple:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">  
        <style type="text/css">  
            .itemTemplate  
            {  
                text-align: center;  
                padding: 6px;  
                border: solid 1px #dddddd !important;  
            }  
        </style> 
    </asp:Content> 
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">  
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1">  
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="rrRot">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="imgPreview" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
        <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Transparency="30" BackColor="#E0E0E0">  
            <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' alt="Loading..." style="border: 0;" /> 
        </telerik:RadAjaxLoadingPanel> 
        <asp:Image ID="imgPreview" runat="server" Width="600px" ImageUrl="~/Images/Gallery/ASau1.jpg" /> 
        <br /> 
        <telerik:RadRotator ID="rrRot" runat="server" PauseOnMouseOver="false" OnItemClick="rrRot_ItemClick" Width="670px" Height="100px">  
            <ItemTemplate> 
                <div class="itemTemplate">  
                    <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' alt='gallery image' width="120" /> 
                </div> 
            </ItemTemplate> 
        </telerik:RadRotator> 
    </asp:Content> 
     

    You can see this page on REMOVED - SOLVED
    I changed the size of the imgPreview to make the things a bit larger.
    The result is in REMOVED - SOLVED

    With FF 3.0.5 it works as expected - at least when I turn of "PauseOnMouseOver" because this sometimes stops the animation.
    It goes than into a state where it does not scroll - but when I enter with the mouse and go out again it scrolls for some frames than it stops again.....

    But anyhow - I don't really need PauseOnMouseOver.
    But when you whatch the page with IE 7 - it is in simply words "unusable".

    The Rotator is not included in scrolling.
    If you load the page it is below the containing div.
    When you scroll down an click on an image - it is positioned inside the frame.
    But scrolling scrolls only the imgPreview not the rotator....
    If you scroll up and click again -- it is displayed again below the div.

    I don't think this is what you mean when you say:

    Wide Cross-browser Support
    RadControls for ASP.NET AJAX provides a consistent experience across all the major browsers: Internet Explorer, Firefox, .....
    :)

    Just kidding - but help would be great!!

    Regards

    Manfred

  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 27 Jan 2009 Link to this post

    Hi Manfred,

    The scroll bars appear because you have used overflow: auto for the following <div> :
    <div style="height: 588px; width: 718px; float: left; overflow: auto; padding:6px 6px 6px 6px; ">

    If you do not need auto scrolling for this <div> I suggest to use overflow:hidden.

    Most probably, the problem is a combination of:
    •  The auto scroll of the page
    • The different size of the images that are loaded
    • set fixed height
    all this leads to the appearance of scrollbars (which expected browser behavior). What we can suggest in short is to use images of equal size or make the container div higher.
     
    The RadRotator control is out of the <div> element because of so-called "guillotine bug" - relatively positioned elements do not scroll with a parent that has an overflow auto. To fix this, add to the parent that has overflow: auto - position: relative.


    Kind regards,
    Fiko
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 27 Jan 2009 Link to this post

    Hi,

    scrolling is intended -- my site consist of a "static frame" which holds navi, footer and such things.
    The pages are variable long - and should scroll in the "content pane".
    By the way - the images are of equal size.

    Anyhow - using position: relative - changes nothing (frame looks still like it should) -
    BUT: it really fixes the scroll problem :)

    On (little) different behaviour occures still.
    When I select a new picture IE loads it to the top.
    FF instead (sometimes) scrolls up the frame to the top after displaying the picture.
    It does not scroll everytime (when I select the same pic again it does not) - if the rotator did scroll,
    or if I use an image the first time it scroll up.

    Interesting - but not a problem since the current layout is bad.
    The rotator will finally be on top - and the preview will be below.

    Thanks a lot for that help

    Manfred
  5. Jhanzaib Tariq
    Jhanzaib Tariq avatar
    4 posts
    Member since:
    Jan 2010

    Posted 24 Mar 2010 Link to this post

    Hi Fiko,

    I am also facing same scrolling issues in IE7. I have applied above mentioned changes but problem still persist.

    You may check this issue at http://cmsdemo.ascertia.com/Index.aspx

    Kindly do help ASAP.

    Cheers,
    Jhan Zaib
  6. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 27 Mar 2010 Link to this post

    Hello Jhan,

    Setting position: relative to the parent that has overflow:auto, should solve the problem, as described in the following article: http://snook.ca/archives/html_and_css/position_relative_overflow_ie/.

    I tested the live URL, but did not see any strange (scrolling) behavior. See attached screen-shots.

    Could you please isolate the issue in a separate sample project, and send it back to us? You need to open a support ticket in order to attach files.


    Sincerely yours,
    Pero
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017