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