Radrotator padding and missing text in IE6

[SVA Webmaster]

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>

 

[Fiko]

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.