I currently have 3 tabs positioned at the top of a form, each contained within their own <div> elements.
Below is the CSS styling:
.lefttab1 {
position: relative;
border-top-right-radius: 50px;
-webkit-box-shadow: 2px -1px 2px #CCC;
height: 35px;
width: 300px;
float: left;
margin-top: 44px;
padding-top: 10px;
}
.midtab {
position: relative;
border-top-right-radius: 50px;
-webkit-box-shadow: 2px -1px 2px #CCC;
height: 35px;
width: 400px;
margin-top: 44px;
margin-left: 259px;
padding-top: 10px;
}
.righttab1 {
border-top-right-radius: 50px;
height: 35px;
width: 375px;
float: right;
margin-top: -45px;
padding-top: 10px;
}
Here is the HTML markup:
<a href="/account.aspx" class="lefttab1 tabcolorGrey">
<asp:Label ID="lablelft" runat="server" ForeColor="#a1a1a1" text="Select A Payment Account" CssClass="tabtextLeft1"></asp:Label>
</a>
<div class="midtab tabcolorGrey">
<asp:Label ID="Label3" runat="server" ForeColor="#a1a1a1" text="Payment Information" CssClass="tabtextLeft1"></asp:Label>
</div>
<div class="righttab1 tabcolorPurple">
<asp:Label ID="Label4" runat="server" ForeColor="#ffffff" text="Payment Confirmation" CssClass="tabtextRight1"></asp:Label>
</div>
Currently, Lefttab1 should overlay midtab, while midtab should overlay righttab1. However, it seems like Lefttab1 is not overlaying midtab correctly, but rather midtab is overlaying righttab1. I have tried adjusting the position: attribute and using the z-index, but so far nothing has worked. Any suggestions on how to resolve this issue would be greatly appreciated.
Thank you,