My asp.net page has some Update Panel elements. To prevent issues with asynchronous postback, I need to place my Print Button outside of the panel. However, all other labels and images for my buttons remain inside the panel. Therefore, I am looking to control the page layout using CSS in order to position my btnPrint button right next to image1.
The current Page Layout is as follows:
<div id="Toolbar">
<asp:UpdatePanel ID="UpdateToolbar" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="Label3" runat="server" Text=" Months: "></asp:Label>
<asp:DropDownList ID="ddlMonth" runat="server"></asp:DropDownList>
<asp:Label ID="Label2" runat="server" Text=" Year: "></asp:Label>
<asp:DropDownList ID="ddlYear" runat="server"></asp:DropDownList>
<b id="buttonWrap">>
<asp:Image ID="Image2" runat="server" ImageUrl="Images/DefRefreshBtn.png" Width="15"
Height="20" />
<asp:LinkButton ID="btnRefresh" runat="server" OnClick="btnRefresh_Click1">Refresh</asp:LinkButton>
<asp:Image ID="Image1" runat="server" ImageUrl="Images/DefPrintBtn.png" Width="27"
Height="20" />
</b>
</ContentTemplate>
</asp:UpdatePanel>
<asp:LinkButton ID="btnPrint" runat="server" onclick="btnPrint_Click" CssClass="printBtn">Print</asp:LinkButton>
</div>
Currently, I'm using the following CssClass="printBtn":
.printBtn
{
position: relative;
top: -23px;
right: -700px;
font-weight: bold;
}
However, this hardcoded approach may lead to compatibility issues across different browsers. Is there a way to specify in CSS for my button to be positioned right next to image1?