Problem with DIV

[FurqanAhmed]

I have several DIV layers on my page and on each of these DIV layers is atleast one table. The problem is that, when I hide all Div's and make anyone of then visible, I can still see the borders on the table on the rest of the div's. Any idea on how to take care of this problem

thanks

 

[cLFlaVA]

actual code or a link would be helpful.

there is a best way to avoid this, and it's eliminating table-based layouts.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[FurqanAhmed]

Alright, here's the code.


<table style="WIDTH: 704px; HEIGHT: 30px" runat="server">
<tr>
<td><input onclick="showBooking();" type="button" value="Booking"></td>
<TD><input onclick="showPax();" type="button" value="Passanger"></TD>
<td style="WIDTH: 124px"><input onclick="showContact();" type="button" value="Booking Contact" style="WIDTH: 120px; HEIGHT: 24px"></td>
<td><input onclick="showTravel();" type="button" value="Travel"></td>
<td><input onclick="showAccommodation();" type="button" value="Hotel"></td>
<td><input onclick="showCarHire();" type="button" value="Car Hire"></td>
<td><input onclick="showInsurance();" type="button" value="Insurance"></td>
<td><input onclick="showPayment();" type="button" value="Customer Payment" style="WIDTH: 124px; HEIGHT: 24px"></td>
</tr>
</table>

<INPUT id="lastSelected" type="hidden" value="BookingInfo" runat="server">

<DIV z-index="1" id="BookingInfo" style="LEFT: 25px; VISIBILITY: visible; WIDTH: 760px; FONT-FAMILY: 'BookAntiqua'; POSITION: absolute; TOP: 70px; HEIGHT: 504px"><MAIN:BOOKINGINFO id="MainBookingInfo1" runat="server"></MAIN:BOOKINGINFO></DIV>
<DIV z-index="2" id="PaxInfo" style="LEFT: 25px; VISIBILITY: hidden; WIDTH: 760px; FONT-FAMILY: 'BookAntiqua'; POSITION: absolute; TOP: 70px; HEIGHT: 504px"><paxassanger id="pax1" runat="server"></paxassanger></DIV>
<DIV z-index="3" id="Contact" style="LEFT: 25px; VISIBILITY: hidden; WIDTH: 760px; FONT-FAMILY: 'BookAntiqua'; POSITION: absolute; TOP: 70px; HEIGHT: 504px"><CONTACT:ADDRESS id="Contact1" runat="server"></CONTACT:ADDRESS></DIV>
<DIV z-index="4" id="Travel" style="LEFT: 25px; VISIBILITY: hidden; WIDTH: 760px; FONT-FAMILY: 'BookAntiqua'; POSITION: absolute; TOP: 70px; HEIGHT: 504px"><TRAVEL:FLIGHTS id="Travel1" runat="server"></TRAVEL:FLIGHTS></DIV>
<DIV z-index="5" id="Accommodation" style="LEFT: 25px; VISIBILITY: hidden; WIDTH: 760px; FONT-FAMILY: 'BookAntiqua'; POSITION: absolute; TOP: 70px; HEIGHT: 504px"><HOTEL:ACCOMMODATION id="Accommodation1" runat="server"></HOTEL:ACCOMMODATION></DIV>
<DIV z-index="6" id="CarHire" style="LEFT: 25px; VISIBILITY: hidden; WIDTH: 760px; FONT-FAMILY: 'BookAntiqua'; POSITION: absolute; TOP: 70px; HEIGHT: 504px"><CAR:HIRE id="CarHire1" runat="server"></CAR:HIRE></DIV>
<DIV z-index="7" id="Insurance" style="LEFT: 25px; VISIBILITY: hidden; WIDTH: 760px; FONT-FAMILY: 'BookAntiqua'; POSITION: absolute; TOP: 70px; HEIGHT: 504px"><ins:insurance id="Insurance1" runat="server"></ins:insurance></DIV>
<DIV z-index="8" id="CustomerPayment" style="LEFT: 25px; VISIBILITY: hidden; WIDTH: 760px; FONT-FAMILY: 'BookAntiqua'; POSITION: absolute; TOP: 70px; HEIGHT: 504px"><CUSTOMERAYMENT id="customerpayment1" runat="server"></CUSTOMERAYMENT></DIV>



the buttons on the top only switch from one layer to another. For instance clicking on the Passanger button would invoke this function.

function showPax()
{
document.all['BookingInfo'].style.visibility='hidden';
document.all['Contact'].style.visibility='hidden';
document.all['PaxInfo'].style.visibility='visible';
document.all['Travel'].style.visibility='hidden';
document.all['Accommodation'].style.visibility='hidden';
document.all['CarHire'].style.visibility='hidden';
document.all['Insurance'].style.visibility='hidden';
document.all['CustomerPayment'].style.visibility='hidden';
}

I can't avoid using tables because I'm using C# .net DataGrid objects, they result in Tables on client side.

any ideas?