Weird arrow with external css stylesheet

3 posts, 0 answers
  1. JustinWong
    JustinWong avatar
    147 posts
    Member since:
    Mar 2007

    Posted 16 Mar 2009 Link to this post

    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. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 18 Mar 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JustinWong
    JustinWong avatar
    147 posts
    Member since:
    Mar 2007

    Posted 18 Mar 2009 Link to this post

    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

Back to Top