Why does the rotator add some extra 10px of padding at the top of the container?

[Marc]

I am using the rotator (I am testing it) and am runnig into this problem:

It seems it adds an extra 10px padding at the top of the container panel inside the itemtemplate
this is the code I have:

<

 

telerik:radrotator ID="RadRotator1" runat="server"

 

 

DataSourceID="ObjectDataSource1" FrameDuration="0" width="100%" ScrollDuration="2000">

 

 

<ItemTemplate>

 

 

<asp:Panel ID="Panel2" SkinID="UserPhotoStripPan" runat="server">

 

 

<small><asp:Label ID="Label1" runat="server" Text='<%# Eval("UserName")%>'></asp:Label></small>

 

 

<table border="0" cellpadding="0" cellspacing="0" class="photo-frame">

 

 

<tr>

 

 

<td class="topx--"></td>

 

 

<td class="top-x-"></td>

 

 

<td class="top--x"></td>

 

 

</tr>

 

 

<tr>

 

 

<td class="midx--"></td>

 

 

<td>

 

 

<asp:Image ID="Image1" runat="server" Width="25" ImageUrl='<%#Eval("ProfileImageURL")%>' />

 

 

<td class="mid--x"></td>

 

 

</tr>

 

 

<tr>

 

 

<td class="botx--"></td>

 

 

<td class="bot-x-"></td>

 

 

<td class="bot--x"></td>

 

 

</tr>

 

 

</table>

 

 

</asp:Panel>

 

 

</ItemTemplate>

 

 

 

</telerik:RadRotator>

 

now inside the itemtemplate there is the panel2 panel. It has the asp.net skin set to: UserPhotoStripPan which is this:

<

 

asp:Panel SkinID="UserPhotoStripPan" Width="90" BackColor="#CC66FF" BorderColor="#00CC00" BorderWidth="1" BorderStyle="Outset" style="padding: -10px;" runat="server"></asp:Panel>

 

'0' padding. or yet in this example I tried setting the [padding to a negative value to see if it would bring it up a bit, but did not...

yet when you run it it adds an extra 5px to 10px at the top of panel2

you can see this in the next few days by visiting: http://www.weedbook.ca/

there you will see the rotator scrolling thru a list of ficticious users. NOTE the extra padding at the top of the panel2 between the top and the label....??? why?
below you can see panel2 by itself just as it is and as it should be, as it was droped on its own outside of the rotator control..

any work around this?

[Marc]

Well I m actually wandering if it is not the margin to the inner controls that it adds. Because the distance between the label and the picture is also wrong...
I have also set that to 0 in all the css files I use but still the same...

also you will notice how it screws up my picture frame. those frames are made thru tables around the picture. notice how it adds some extra space at the bottom too...

[Marc]

I seem to have found a temporary solution after 4 hours....

by setting the font size of the rotaotr itself to a small value: 0 will make all elements contained appear one on top of the other where a size of 5pt seem ok.

<

 

telerik:RadRotator ID="RadRotator1" runat="server"

 

 

DataSourceID="ObjectDataSource1" FrameDuration="0" width="100%"

 

 

ScrollDuration="3000" ItemWidth="100" ItemHeight="75" Height="75" Font-Size="5pt">

 

[Georgi Tunev]

Hello Marc,

We haven't encountered the issue you are experiencing, and yet we were unable to find a solution in the code you've sent us. However, consider the following:

1. Check your doctype. RadControls for ASP.NET AJAX are developed to perform best in standards compliance mode, and although they work in quirks mode they may manifest strange behaviors that are hard / impossible to handle.

2. Try to exclude your external styles if you have any. If you have global settings (element instead of class selectors) the padding may be inherited by these global styles.

3. I have noticed that you are using tables for layout. By default, the table cells are vertically aligned in the middle, so the padding may be actually a middle aligned cell, so try the following:

td
{
    vertical-align: top;
}

If none of these helps, please, prepare and send us a small running project that includes your styles, layout, RadRotator and demonstrates the issue, along with a detailed description of the result you want to achieve and which browsers manifest the problem.

All the best,
Georgi Tunev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.