I am have a problem with the dropshadow extender placing the shadow too low on the page. I have a series of asp panels on a page that are targets of dropshadow extenders, for some reason all of the shadow are being postioned too low on the page. It seem that the top shadow is is getting a sytle element with a top value that is placing it too low on the page, and then all of the other dropshadow extender panels are offset by the same value.
Can anyone shed some light as to how the dropshadow extender determines its top position? I assmed that I would be with regard to the posotion of the target panel, but that doesn't seem to be the case here.
Thanks.
Any help welcome!
Hi Audley9,
This kind of issues is usually caused by the css settings. Here is my sample that you can reference to. Please compare it with yours.
<%@. Page Language="C#" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <style type="text/css">.overall { left: 10px; top: 10px; ; height: 500px; background-color: Silver; } .above { position: absolute; margin-left: 50px; margin-top: 50px; z-index: 2; } .aboveinside { width:300px; background-color:#5377A9; color:white; font-weight:bold; } .below { margin-top: 10px; left: 0px; width: 300px; height: 200px; z-index: 1; background-color: Blue; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div class="overall"> <asp:Panel ID="above" runat="server" CssClass="aboveinside"> <div style="padding:10px"> Here's some text in a box. </div> </asp:Panel> <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="above" Width="5" Opacity=".5" Rounded="true" TrackPosition="true" Radius="6"> </cc1:DropShadowExtender> <div class="below">This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... This is some text underneath... </div> </div> </form></body></html>I hope this help.
Best regards,
Jonathan
Thnaks for Answering!
I had solved this issue already but forgot to come back to this post. Whit my situation, I had a series of nested "Div' Tags that had "Postion: relative", set to the divs. I was trying to acomplish a rather complex layout using Css, which I was not able to acomplish (there were other issue besides this one), so I have had to intermingle css with table layout.
Thanks for the help!
No comments:
Post a Comment