Weird arrow with external css stylesheet

[JustinWong]

Hi:

I have a Rad Rotator inside a <td> tag.  I can style the <td> inline with no adverse effect on the rotator:

 

<td style="background-color:White;font-family:Arial;font-size:11px;font-weight:bold;color:#192b11;text-align:left;text-decoration:none;text-indent:2px;width:100%;padding-top:2px;padding-bottom:2px;border-bottom:1px solid #cccccc;"> 

 

<telerik:RadRotator ID="RRtr" RotatorType="automaticadvance" Height="100px" Width="130px" ScrollDirection="Up" FrameDuration="6000" ItemHeight="90px" ItemWidth="130px" runat="server"> 

 

<Items>

 

<telerik:RadRotatorItem> 

 

<ItemTemplate> 

 

<asp:Image runat="server" ID="Image" ImageUrl='~/Images/FlagCA.png' Width="130px" height="50px" AlternateText="Customer Image" /> 

 

</ItemTemplate> 

 

</telerik:RadRotatorItem> 

 

<telerik:RadRotatorItem> 

 

<ItemTemplate> 

 

<asp:Image runat="server" ID="Image" ImageUrl='~/Images/FlagUS.png' Width="130px" height="50px" AlternateText="Customer Image" /> 

 

</ItemTemplate> 

 

</telerik:RadRotatorItem> 

 

</Items> 

 

</telerik:RadRotator> 

 

</td>

 

 

The above works perfectly. However, if I were to remove the style from the td tag and place it inside an external stylesheet like so:

 

<td class="rc_adTdItems"> 

 

<telerik:RadRotator ID="RRtr" RotatorType="automaticadvance" Height="100px" Width="130px" ScrollDirection="Up" FrameDuration="6000" ItemHeight="90px" ItemWidth="130px" runat="server"> 

 

<Items> 

 

<telerik:RadRotatorItem> 

 

<ItemTemplate> 

 

<asp:Image runat="server" ID="Image" ImageUrl='~/Images/FlagCA.png' Width="130px" height="50px" AlternateText="Customer Image" /> 

 

</ItemTemplate> 

 

</telerik:RadRotatorItem> 

 

<telerik:RadRotatorItem>

 

<ItemTemplate> 

 

<asp:Image runat="server" ID="Image" ImageUrl='~/Images/FlagUS.png' Width="130px" height="50px" AlternateText="Customer Image" />

 

</ItemTemplate>

 

</telerik:RadRotatorItem>

 

</Items>

 

</telerik:RadRotator>  

 

</td>

 

 

.rc_adTdItems

{

background-color:White; 

 

font-family:Arial, Helvetica, sans-serif; 

 

font-size:11px;

 

 

 

font-weight:bold;

 

 

 

color:#192b11;  

 

text-align:left; 

 

text-decoration:none; 

 

 

 

text-indent:2px; 

 

 

 

width:100%; 

 

 

 

padding-top:2px;

 

 

 

padding-bottom:2px;  

 

border-bottom:1px solid #cccccc;  

}

 

Now, I've got arrow showing up on all sides of the Rotator - and I just couldn't get rid of them.  This is most irregular and I'm wondering if anyone has seen this before and knows how to resolve this.

Thanks!

[Fiko]

Hi Justin,

I used your code and prepared a test project, but I was not able to reproduce the problem. Could you please check the attached sample and let me know how it differs from yours? If your scenario is different, please rework my project in order to replicate your setup, open a new support ticket and send it back to me. when I have a better view over the problem I will be able to provide a solution.

All the best,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[JustinWong]

Hi Fiko:

 

I discovered that the source of the problem is not in the 

.rc_adTdItems { } in the style sheet by another element

.rc_adTdItems a
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#192b11;
display:block;

 

text-indent

 

:2px;
line-height:16px;
}

I believe the RadRotator uses its own style with the <a> tag. Because the RadRotator is within my <td> tag and I have, by virtual of the above stylesheet element, somehow there is a conflict.

 

So, what I had to do was to rename my element from .rc_adTdItems a{. . .} to something else  (e.g.: rc_adTdItemsLink{. . .}.  And then, if I have my own <a> tag within the <td class="rc_adTdItems"> tag, I have to explicitly associate with my <a> tag with the class called "rc_adTdItemsLink" instead of just assuming it from the td class. 

Once I made this change, then I can place the RadRotator within my <td> tag without any problem.  Not sure why that is the case, though.

Thanks!

Justin