Hello all experts,
I have a page with check boxes in it that when checked a paragraph is opened below it, what i want is to align all the 4 paragraph together so they are all have the same width and hieght.
Would someone tell me how to do this?
Thanks
Here is the code of the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Our Customers </TITLE>
<script language="JavaScript">
<!--
//========================
==========
==========
==========
=
//detect browser settings for showing and hiding DIVs
isNS4 = (document.layers) ? true : false;
isIE4 = (document.all && !document.getElementById) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
//========================
==========
==========
==========
=
function switchDiv(strDivName,bolVi
sible){
//identify the element based on browser type
if (isNS4) {
objElement = document.layers[strDivName
];
} else if (isIE4) {
objElement = document.all[strDivName].s
tyle;
} else if (isIE5 || isNS6) {
objElement = document.getElementById(st
rDivName).
style;
}
if(isNS4){
if(!bolVisible) {
objElement.visibility ="hidden"
} else {
objElement.visibility ="visible"
}
}else if(isIE4){
if(!bolVisible) {
objElement.visibility = "hidden";
} else {
objElement.visibility = "visible";
}
} else if (isIE5 || isNS6) {
if(!bolVisible){
objElement.visibility = "hidden";
} else {
objElement.visibility = "visible";
}
}
}
function toggleDetails(objCheck,str
DivName){
var objTableCell = document.getElementById('t
dDetails')
;
if(objCheck.checked){
switchDiv(strDivName,true)
}else{
switchDiv(strDivName,false
)
}
}
//-->
</script>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2600.0" name=GENERATOR>
<link rel="stylesheet" href="diet.css" type="text/css">
<link rel="stylesheet" href="ver.css" type="text/css">
<link rel="stylesheet" href="diet.css" type="text/css">
<STYLE type="text/css">
BODY {scrollbar-3dlight-color:#
666666;
scrollbar-arrow-color:#666
666;
scrollbar-base-color:#6666
66;
scrollbar-track-color:#ECE
CD9;
scrollbar-darkshadow-color
:#999999;
scrollbar-face-color:#ECEC
D9;
scrollbar-highlight-color:
#fffff;
scrollbar-shadow-color:#66
6666}
</STYLE>
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" link="#666666" onLoad ="switchDiv('tdDetails1',f
alse);swit
chDiv('tdD
etails2',f
alse);swit
chDiv('tdD
etails3',f
alse);swit
chDiv('tdD
etails4',f
alse)">
<table width="766" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="766" height="15"></td>
</tr>
<tr>
<td valign="top" height="205">
<table width="75%" border="0">
<tr>
<td width="1" height="16"></td>
<td width="259"></td>
<td width="51"></td>
<td width="3"></td>
<td width="18"></td>
<td width="210" rowspan="2"><img src="gsl_logo.gif" width="147" height="68"></td>
<td width="4"></td>
</tr>
<tr>
<td colspan="2" height="52" valign="top" bgcolor="#3366CC"><img src="bravnetlogo.gif" width="263" height="50"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5" height="22">
<input type="checkbox" name="checkbox" value="checkbox" onClick ="toggleDetails(this,'tdDe
tails1')">
<font color="#CC0000"><b>Click for more details.</b></font> </td>
<td>
<input type="checkbox" name="checkbox2" value="checkbox" onClick ="toggleDetails(this,'tdDe
tails2')">
<font color="#CC0000"><b>Click for more details.</b></font> </td>
<td></td>
</tr>
<tr>
<td height="68"></td>
<td valign="top" id = "tdDetails1" colspan="2"><font color="#666666" size="1">When
people click for more details, I’d like this paragraph description
to open under the <b>one for more details</b>. Also in the paragraph
there would be a “X” button click to close paragraph .</font></td>
<td></td>
<td></td>
<td colspan="2" valign="top" id = "tdDetails2"><font color="#666666" size="1">When
people click for more details, I’d like this paragraph description
to open under the <b>two for more details</b>. Also in the paragraph
there would be a “X” button click to close paragraph .</font></td>
</tr>
<tr>
<td height="60" colspan="5" valign="top"><img src="focus_logo.gif" width="140" height="40"></td>
<td valign="top"><img src="logo2.gif" width="60" height="58"></td>
<td></td>
</tr>
<tr>
<td height="22" colspan="5" valign="top">
<input type="checkbox" name="checkbox3" value="checkbox" onClick ="toggleDetails(this,'tdDe
tails3')">
<font color="#CC0000"><b>Click for more details.</b></font> </td>
<td valign="top">
<input type="checkbox" name="checkbox4" value="checkbox" onClick ="toggleDetails(this,'tdDe
tails4')">
<font color="#CC0000"><b>Click for more details.</b></font> </td>
<td></td>
</tr>
<tr>
<td height="92" colspan="4" valign="top" id = "tdDetails3"><font size="1" color="#999999">When
people click for more details, I’d like this paragraph description
to open under the <b>three for more details</b>. Also in the paragraph
there would be a “X” button click to close paragraph .</font></td>
<td></td>
<td valign="top" id = "tdDetails4"><font size="1" color="#999999">When
people click for more details, I’d like this description to open
under the <b>four for more details</b>. Also in the paragraph there
would be a “X” button click to close paragraph .</font></td>
<td></td>
</tr>
<tr>
<td height="65"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
