fusi.eon

I have an ASP.Net menu. I have a horizontal bar and an image right after it. THe problem is it's displaying the child items behind the image and bar. How can I bring it to the front. I also tried z:index, but that didn't work. This is the image of the problem: http://img138.imageshack.us/img138/7668/err2gy3.jpg This is the code: <div id="styletwo" style="left: 220px; width: 728px; top: -22px; z-index: 101;"> <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" style="z-index: 201; left: 6px; position: relative; top: 5px"> <Items> <asp:MenuItem Text="Home" Value="Home" Selected="True" NavigateUrl="~/Home.aspx"></asp:MenuItem> <asp:MenuItem Text="Assets" Value="Assets" NavigateUrl="~/frm_assets.aspx"></asp:MenuItem> <asp:MenuItem Text="Purchase" Value="Purchase"></asp:MenuItem> <asp:MenuItem Text="Contracts" Value="Contracts"></asp:MenuItem> <asp:MenuItem Text="Admin" Value="Admin" NavigateUrl="~/frm_admin.aspx"></asp:MenuItem> <asp:MenuItem Text="Reports" Value="Reports" NavigateUrl="~/frm_reports.aspx"> <asp:MenuItem Text="System" Value="System"></asp:MenuItem> <asp:MenuItem Text="Laptop" Value="Laptop"></asp:MenuItem> <asp:MenuItem Text="Server" Value="Server"></asp:MenuItem> <asp:MenuItem Text="Printer" Value="Printer"></asp:MenuItem> <asp:MenuItem Text="Projector" Value="Projector"></asp:MenuItem> <asp:MenuItem Text="UPS" Value="UPS"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem Text="Support" Value="Support"></asp:MenuItem> <asp:MenuItem Text="Logout" Value="Logout" NavigateUrl="~/login.aspx"></asp:MenuItem> </Items> </asp:Menu> </div> . . .and this is the css: #styletwo { position:relative; display:block; height:24px; font-size:11px; font-weight:bold; background:transparent url(images/bgOFF.gif) repeat-x top left; font-family:Verdana; } #styletwo tr { margin:0; padding:0; list-style-type:none; width:100%; } #styletwo tr td { display:block; float:left; margin:0 1px 0 0; } #styletwo tr td a { display:block; float:left; color:#000; text-decoration:none; padding:0px 15px 0 20px; height:24px; } #styletwo tr td a:hover,#styletwo tr td a:active { display:inline-block; color:#fff; background:transparent url(images/bgON.gif) repeat-x bottom right; } Also I'd like the on hover block to cover the whole block not leave some gap at the top as shown in the pic. Any solutions?

That's a cool functionality. I hope the Opera people implement it while developing the next version. Opera has only reached till so far where if there's text written in input fields and you accidentally click some button, by going back it retains all the input.

Thanks for the offer once again. I solved the problem fortunately. The problem was that I had a % width which I just set to fixed width. That seems to have worked. Thanks really. Once again.

Opera rocks! It's smart, simple yet so rich with features. Ever since I switched to Opera, I haven't looked back. I tried using Firefox [kept it as alternative] but haven't really been able to adapt to it. Simplicity is what has me hooked to it.

Thanks for the response. But the problem is I've 10 different forms with different alignments but same fields. So, how will I add the CSS to so many fields. It will make it more complicated, wouldn't it? Plus, I'd have to re-do all the forms all over again. Isn't there a simpler solution? As for the link, unfortunately, the project is not yet online.

This is the source code of that form: <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <table border=0> <tr> <td> <img src="images/proj_logo.jpg"/> </td> </tr> </table> <fieldset style="width:95%; text-align: center"> <legend class="legend">User Details</legend> <table border="0" cellspacing="0" cellpadding="0" class="t1" frame="box"> <tr> <td colspan="2" style="width: 170px">Custodian</td> <td colspan="2" style="width: 200px" ><asp:TextBox ID="txt_custname" runat="server" Font-Names="Verdana" Font-Size="7.5pt" AutoPostBack="true" Width="150px" BorderStyle="Groove"></asp:TextBox></td> </tr> <tr> <td colspan="2" style="width: 170px">Region</td> <td colspan="2" style="width: 200px"><asp:DropDownList ID="ddl_region" runat="server" Width="154px" AutoPostBack="True" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td> <td colspan="2" style="width: 170px">Station</td> <td colspan="2"><asp:DropDownList ID="ddl_station" runat="server" Width="154px" AutoPostBack="True" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td> </tr> <tr> <td colspan="2" style="width: 170px">Branch</td> <td colspan="2" style="width: 200px"><asp:DropDownList ID="ddl_branch" runat="server" Width="154px" AutoPostBack="True" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td> <td colspan="2" style="width: 170px">Department</td> <td colspan="2"><asp:DropDownList ID="ddl_depart" runat="server" Width="154px" AutoPostBack="True" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td> </tr> </table> </fieldset> <fieldset style="width:95%; text-align: center;"> <legend class="legend">Asset Details</legend> <table border="0" width="80%" cellspacing="0" cellpadding="0" class="t1"> <tr> <td style="width: 170px">Model</td> <td style="width: 200px"><asp:TextBox ID="txt_model" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="150px" BorderStyle="Groove"></asp:TextBox></td> <td style="width: 170px">Manufacturer</td> <td><asp:TextBox ID="txt_manufacturer" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="150px" BorderStyle="Groove"></asp:TextBox></td> </tr> <tr> <td style="width: 170px">Lamp Capacity</td> <td style="width: 200px"><asp:TextBox ID="txt_ast_lp_capacity" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="115px" BorderStyle="Groove"></asp:TextBox> Watt</td> <td style="width: 170px">Resolution</td> <td><asp:TextBox ID="txt_ast_resolution" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="150px" BorderStyle="Groove"></asp:TextBox></td> </tr> </table> </fieldset> <fieldset style="width:95%; text-align: center;"> <legend class="legend">Resource Info</legend> <table border="0" width="80%" cellspacing="0" cellpadding="0" class="t1"> <tr> <td style="width: 170px">Vendor Name</td> <td style="width: 200px"> <asp:DropDownList ID="ddl_ri_vname" runat="server" Width="154px" Font-Names="Verdana" Font-Size="7.5pt"> </asp:DropDownList> <asp:ImageButton ID="addvend" runat="server" OnClientClick="ShowTxt('mydiv'); return false;" ImageUrl="~/edit_add1.png" style="left: 1px; position: relative; top: 4px" /> </td> <td style="width: 170px">Procurement Date</td> <td> <asp:TextBox ID="txt_date" runat="server" Width="135px" Font-Names="Verdana" Font-Size="7.5pt" BorderStyle="Groove"></asp:TextBox> <a href="Cal.aspx?src=ctl00_ContentPlaceHolder1_txt_date" target="cal" onclick="document.getElementById('cal').style.display=''"><img src="date.png" alt="Calendar" style="left: -3px; position: relative; top: 5px;border:white;" /></a> </td> </tr> <tr> <td style="width: 170px"> <asp:RadioButton ID="warranty" runat="server" Text="Warranty" GroupName="warrant" /></td> <td style="width: 200px"> <asp:RadioButton ID="rd_amc" runat="server" Text="AMC" GroupName="warrant" /> </td> <td style="width: 170px">Year(s) of Warranty</td> <td><asp:DropDownList ID="ddl_year_warranty" runat="server" Font-Names="Verdana" Font-Size="7.5pt"></asp:DropDownList></td> </tr> <tr> <td style="width: 170px">Expiry Date</td> <td style="width: 200px"><asp:TextBox ID="txt_expdate" runat="server" Font-Names="Verdana" Font-Size="7.5pt" Width="150px" BorderStyle="Groove"></asp:TextBox></td> <td style="width: 170px">Allotment Date</td> <td><asp:TextBox ID="txt_allot" runat="server" Width="135px" Font-Names="Verdana" Font-Size="7.5pt" BorderStyle="Groove"></asp:TextBox> <a href="Cal.aspx?src=ctl00_ContentPlaceHolder1_txt_allot" target="cal" onclick="document.getElementById('cal').style.display=''"><img src="date.png" alt="Calendar" style="left: -3px; position: relative; top: 5px;border:white;" /></a> </td> </tr> <tr onclick="return toggle();"> <td style="width: 170px">Condition</td> <td style="width: 200px"> <asp:RadioButton id="rdb1" runat="server" Text="Active" GroupName="condition" Checked="true" /> <asp:RadioButton id="rdb2" runat="server" Text="Non-Active" GroupName="condition" /> </td> <td style="width: 170px"> <asp:RadioButton id="rdb3" runat="server" Text="Others" GroupName="condition" /> </td> <td id="txt" style="display:none"> <asp:TextBox ID="txt_others" runat="server" Font-Names="Verdana" Width="150px" Font-Size="7.5pt"></asp:TextBox> </td> </tr> </table> </fieldset> <fieldset style="width:95%; text-align: center;"> <legend class="legend">Additional Details</legend> <table border="0" width="80%" cellspacing="0" cellpadding="0" class="t1"> <tr> <td>Remarks</td> <td><asp:TextBox ID="txt_remark" runat="server" Width="291px" Font-Names="Verdana" Font-Size="7.5pt"></asp:TextBox></td> </tr> </table> </fieldset> ============== CSS: .legend { /* color: buttontext; */ font-size: 7.5pt; font-weight: bold; font-family: Verdana; /*background-color:#006697;*/ color:#000080; /*border-color:#006697;*/ } .t1 { vertical-align: middle; width: 677px; font-family: Verdana; font-size: 7.5pt; text-align: left; } .t1 tr td { width:179px; color:#000080; }

I have made a website using CSS. I got the controls aligned well, but there's one form whose textboxes display outside the line and are not aligned properly. This is the image of the website: http://img145.imageshack.us/img145/2069/codeci3.png THe CSS of the ContentPlaceHolder (using MasterPages): body { font-size: smaller; } #main { float: right; width: 67%; background: #fff; margin-right: 40px; padding-bottom: 10px; padding-right: 10px; margin-top:-38px; } #right { float: left; width: 15%; background: #fff; border-right: 2px solid #000; margin-left: 48px; padding-bottom: 10px; padding-right: 45px; margin-top:-34px; } This is IE. In Firefox, everything is complete haywire. But we'll come to that later.