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

Weird arrow with external css stylesheet

2 Answers 52 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
JustinWong
Top achievements
Rank 1
JustinWong asked on 16 Mar 2009, 07:49 PM
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!

2 Answers, 1 is accepted

Sort by
0
Fiko
Telerik team
answered on 18 Mar 2009, 12:23 PM
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.
0
JustinWong
Top achievements
Rank 1
answered on 18 Mar 2009, 11:52 PM

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

Tags
Rotator
Asked by
JustinWong
Top achievements
Rank 1
Answers by
Fiko
Telerik team
JustinWong
Top achievements
Rank 1
Share this question
or