Radrotator padding and missing text in IE6

2 posts, 0 answers
  1. SVA Webmaster
    SVA Webmaster avatar
    11 posts
    Member since:
    Jul 2007

    Posted 15 Jan 2009 Link to this post

    Hi Telerik Team,

    I am experiencing 2 issues with the radrotator (Q3 2008) in IE6. These issues do not occur with any version of Firefox, Safari, Chrome or Opera and displays fine in IE7 as well.

    The first problem is that the radrotator, in IE6 only, appears to pad the left side of my itemtemplate by 10px, despite there being no styling specifying so. The second problem is that the images in each item display fine, however the text floated to the right of them is not visible, despite showing up in the HTML when I "view source" from the browser.

    Below is the complete HTML to duplicate this problem:

    <%

    @ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>

     

    <%

    @ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

     

    <!

     

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     

    <

     

    html xmlns="http://www.w3.org/1999/xhtml">

     

    <

     

    head runat="server">

     

     

    <title>Radrotator Test Page</title>

     

    </

     

    head>

     

    <

     

    body>

     

     

    <form id="form1" runat="server">

     

     

    <asp:ScriptManager ID="smMaster" runat="server">

     

     

    </asp:ScriptManager>

     

     

    <telerik:RadRotator ID="rrTest" runat="server" Skin="" FrameDuration="10000" Height="267px"

     

     

    ScrollDuration="1000" Width="737px" EnableEmbeddedSkins="False" ScrollDirection="Left"

     

     

    ItemHeight="267px" ItemWidth="737px">

     

     

    <Items>

     

     

    <telerik:RadRotatorItem>

     

     

    <ItemTemplate>

     

     

    <div style="margin: 0 10px 0 10px; background-color: #f3f3f3; width: 406px; height: 267px;

     

     

    float: left;">

     

     

    <img src="" width="406" height="267" alt="test" /></div>

     

     

    <div style="float: right; margin: 0 10px 0 0; background-color: #f3f3f3; width: 291px;

     

     

    height: 257px; padding: 5px;">

     

     

    <h2>

     

    Feature Headline

     

    </h2>

     

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

    euismod tincidunt ut laoreet dolore.

     

    <p>

     

    Ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis

    nisl ut aliquip ex ea commodo consequat.

    </p>

     

     

    </div>

     

     

    </ItemTemplate>

     

     

    </telerik:RadRotatorItem>

     

     

    <telerik:RadRotatorItem>

     

     

    <ItemTemplate>

     

     

    <div style="margin: 0 10px 0 10px; background-color: #f3f3f3; width: 406px; height: 267px;

     

     

    float: left;">

     

     

    <img src="" width="406" height="267" alt="test" /></div>

     

     

    <div style="float: right; margin: 0 10px 0 0; background-color: #f3f3f3; width: 291px;

     

     

    height: 257px; padding: 5px;">

     

     

    <h2>

     

    Feature Headline 2

     

    </h2>

     

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

    euismod tincidunt ut laoreet dolore.

     

    <p>

     

    Ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis

    nisl ut aliquip ex ea commodo consequat.

    </p>

     

     

    </div>

     

     

    </ItemTemplate>

     

     

    </telerik:RadRotatorItem>

     

     

    </Items>

     

     

    </telerik:RadRotator>

     

     

    </form>

     

    </

     

    body>

     

    </

     

    html>

     

  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 16 Jan 2009 Link to this post

    Hi Craig,

    These problems occurs because the Internet Explorer 6 has problems with the box model in floated elements and this issue is not related to the RadRotator control itself. This is why I have reduced the items' width with 10 pixels and cleared the padding under IE6. I have moved your styles to classes in order to manipulate them easier.
    You can examine the changes in the attached project.

    I hope this helps.

    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
Back to Top