Rotator forces a gradiant due to filter

2 posts, 0 answers
  1. Esk
    Esk avatar
    5 posts
    Member since:
    Dec 2008

    Posted 13 May 2009 Link to this post

    I have a division that holds my rotator. That division has a background image that is 1px semi transparent png file that repeats. When the page is initially loaded everything looks fine, however when a scroll is performed by clicking on a button the background develops a gradient on x and y.

    After some investigating and inspecting i saw that rrItemList has a filter css, i tried setting explicitly that class to filter: none and that made it worse - causes the gradient to be there even on initial load. Here is my front end:
    Css
    1 #pnlPhotoStrip  
    2  
    3 {  
    4  
    5 margin-top: -62px;  
    6  
    7 background-imageurl(images/bgrndTransparentDark.png);  
    8  
    9 background-repeat:repeat;  
    10  
    11 background-color:Transparent;  
    12  
    13 position:relative;  
    14  
    15 width:608px;  
    16  
    17 height:62px;  
    18  
    19 z-index:1000;  
    20  
    21 filter: none!important;  
    22  
    23 }  
    24 .outerSpan  
    25         {  
    26             margin5px 4px 5px 4px;  
    27             bordersolid 1px #8a846c;  
    28         }  
    29         .outerSpan img  
    30         {  
    31             displayblock;  
    32         } 

    1 <div id="pnlPhotoStrip">  
    2         <table border="0" cellpadding="0" style="width:608px;" cellspacing="0" class="tableWrapper">  
    3             <tr> 
    4                 <td> 
    5                     <asp:Image ID="imgLeftArrow" AlternateText="left" runat="server" ImageUrl="images/btnLeft.png" /> 
    6                 </td> 
    7                 <td> 
    8                     <telerik:RadRotator ID="thumbRotator" Skin="Black" runat="server" RotatorType="Buttons" 
    9                         Width="550px" Height="62px" ItemHeight="62px" FrameDuration="1" OnItemClick="ShowImage" 
    10                         ScrollDuration="1">  
    11                         <ItemTemplate> 
    12                             <div class="outerSpan">  
    13                                 <asp:Image ID="imgItem" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "imagefile") %>' 
    14                                     CssClass="RotatorImage" AlternateText='<%# DataBinder.Eval(Container.DataItem, "Caption")%>' 
    15                                     runat="server" /> 
    16                             </div> 
    17                         </ItemTemplate> 
    18                         <ControlButtons LeftButtonID="imgLeftArrow" RightButtonID="imgRightArrow" /> 
    19                     </telerik:RadRotator> 
    20                 </td> 
    21                 <td> 
    22                     <asp:Image ID="imgRightArrow" AlternateText="right"  runat="server" ImageUrl="images/btnRight.png" /> 
    23                 </td> 
    24             </tr> 
    25         </table> 
    26     </div> 

    I need that background to be the same opacity in the entire div.I tried:
     - changing the skin even disabling the embedded skins - no luck. 
     - creating another div to have the background image and overlaying the pnlPhotoStrip on top of it with margin:0; and higher z-index - no luck,
     - looking at the skins css to find where that filter is being set- couldn't find the class.
    - filter: none for .rrItemsList didn't help at all  even with !important and I verified that it is using the infile stylesheet call to that css block by adding a border to it and that showed.

    The gradient is the entire 608px x 62px which is the width / height of pnlPhotoStrip even though the rotator is smaller.

    Any suggestions how i can fix this?

    PS using asp.net with ajax version 2009 q1
  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 18 May 2009 Link to this post

    Hello Esk,

    We are not quite sure what your requirement is and that is why, I would like to ask you to open a new support ticket and send us a simple project including the CSS declarations that you used. We also need more details about the behavior that you need to achieve. It will be best if you provide us with some visual explanation as well.

    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
Back to Top