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

Strange scroll behaviour in IE7

4 Answers 149 Views

Rotator

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

ManniAT asked on 23 Jan 2009, 06:26 PM

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

4 Answers, 1 is accepted

answered on 27 Jan 2009, 08:35 AM

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.

answered on 27 Jan 2009, 11:08 AM

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

answered on 27 Mar 2010, 10:57 AM

ie7-comp.png

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.