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
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
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
| #pnlPhotoStrip | |
| { | |
| margin-top: -62px; | |
| background-image: url(images/bgrndTransparentDark.png); | |
| background-repeat:repeat; | |
| background-color:Transparent; | |
| position:relative; | |
| width:608px; | |
| height:62px; | |
| z-index:1000; | |
| filter: none!important; | |
| } | |
| .outerSpan | |
| { | |
| margin: 5px 4px 5px 4px; | |
| border: solid 1px #8a846c; | |
| } | |
| .outerSpan img | |
| { | |
| display: block; | |
| } |
| <div id="pnlPhotoStrip"> | |
| <table border="0" cellpadding="0" style="width:608px;" cellspacing="0" class="tableWrapper"> | |
| <tr> | |
| <td> | |
| <asp:Image ID="imgLeftArrow" AlternateText="left" runat="server" ImageUrl="images/btnLeft.png" /> | |
| </td> | |
| <td> | |
| <telerik:RadRotator ID="thumbRotator" Skin="Black" runat="server" RotatorType="Buttons" | |
| Width="550px" Height="62px" ItemHeight="62px" FrameDuration="1" OnItemClick="ShowImage" | |
| ScrollDuration="1"> | |
| <ItemTemplate> | |
| <div class="outerSpan"> | |
| <asp:Image ID="imgItem" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "imagefile") %>' | |
| CssClass="RotatorImage" AlternateText='<%# DataBinder.Eval(Container.DataItem, "Caption")%>' | |
| runat="server" /> | |
| </div> | |
| </ItemTemplate> | |
| <ControlButtons LeftButtonID="imgLeftArrow" RightButtonID="imgRightArrow" /> | |
| </telerik:RadRotator> | |
| </td> | |
| <td> | |
| <asp:Image ID="imgRightArrow" AlternateText="right" runat="server" ImageUrl="images/btnRight.png" /> | |
| </td> | |
| </tr> | |
| </table> | |
| </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
