table cells shrink when re-opening a hidden table
I have a big, intimidating form. To reduce the intimidation factor, I've hidden the fields so that the user can input a little at a time with no confusion.
My problem is with Firefox, Safari, Opera and Chrome. It works fine in IE.
When the page opens, it looks fine with the table width at 100% and the table cells filling it in fully. The problem is that when I click the link to hide the table, then re-open it, the table cells shrink down to an unexpected size. This happens in all the browsers (except IE). The code is listed here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="CSS/1440x900/input_m
<script type="text/javascript">
<!--
//========================
function showHideTable(theTable)
{
if (document.getElementById(t
{
document.getElementById(th
}
else
{
document.getElementById(th
}
}
//Tablolar1 Göster / Gizle.
//========================
//-->
//
</script>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size:1em;}
table#personalInfo {width:100%}
table#personalInfo tr {width:100%;font-size:1em;
table#personalInfo th {bgcolor:#2455FF}
table#personalInfo td {width:17%; font-size:1em;}
#apDiv1 {
position:absolute;
width:98%;
z-index:1;
left: 1%;
top: 25%;
}
-->
</style></head>
<body>
<a href="javascript:;" onclick="showHideTable('pe
<div id="apDiv1">
<table id="personalInfo" style="display:noner" border="1" bordercolor="#000000" bgcolor="#FFFFFF">
<tr>
<th class="style38" >Personal Information</td>
<th> </td>
<th> </td>
<th> </td>
<th> </td>
<th> </td>
</tr>
<tr>
<td><div align="right">Spouse's first name:</div></td>
<td><input type="text" name="spouse_first_name" id="spouse_first_name" onfocus="MM_effectHighligh
<td><div align="right">1st Spouse's first name:</div></td>
<td><input type="text" name="1st_spouse_first_nam
<td> </td>
<td> </td>
</tr>
<tr>
<td><div align="right">Race</div></
<td ><select name="race" id="race">
<option value="">--Select--</optio
<option value="Asian">Asian</optio
<option value="Alaskan Native">Alaskan Native</option>
<option value="American Indian">American Indian</option>
<option value="Black">Black</optio
<option value="Hispanic">Hispanic<
<option value="White">White</optio
</select></td>
<td><div align="right">Height: short; medium or tall</div></td>
<td><select name="height" id="height">
<option value="">--Select--</optio
<option value="short">short</optio
<option value="medium">medium</opt
<option value="tall">tall</option>
</select></td>
<td><div align="right">Birth year: </div></td>
<td><input type="text" name="birth_year" id="birth_year" onfocus="MM_effectHighligh
</tr>
</table></div>
</body>
</html>
My problem is with Firefox, Safari, Opera and Chrome. It works fine in IE.
When the page opens, it looks fine with the table width at 100% and the table cells filling it in fully. The problem is that when I click the link to hide the table, then re-open it, the table cells shrink down to an unexpected size. This happens in all the browsers (except IE). The code is listed here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="CSS/1440x900/input_m
<script type="text/javascript">
<!--
//========================
function showHideTable(theTable)
{
if (document.getElementById(t
{
document.getElementById(th
}
else
{
document.getElementById(th
}
}
//Tablolar1 Göster / Gizle.
//========================
//-->
//
</script>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size:1em;}
table#personalInfo {width:100%}
table#personalInfo tr {width:100%;font-size:1em;
table#personalInfo th {bgcolor:#2455FF}
table#personalInfo td {width:17%; font-size:1em;}
#apDiv1 {
position:absolute;
width:98%;
z-index:1;
left: 1%;
top: 25%;
}
-->
</style></head>
<body>
<a href="javascript:;" onclick="showHideTable('pe
<div id="apDiv1">
<table id="personalInfo" style="display:noner" border="1" bordercolor="#000000" bgcolor="#FFFFFF">
<tr>
<th class="style38" >Personal Information</td>
<th> </td>
<th> </td>
<th> </td>
<th> </td>
<th> </td>
</tr>
<tr>
<td><div align="right">Spouse's first name:</div></td>
<td><input type="text" name="spouse_first_name" id="spouse_first_name" onfocus="MM_effectHighligh
<td><div align="right">1st Spouse's first name:</div></td>
<td><input type="text" name="1st_spouse_first_nam
<td> </td>
<td> </td>
</tr>
<tr>
<td><div align="right">Race</div></
<td ><select name="race" id="race">
<option value="">--Select--</optio
<option value="Asian">Asian</optio
<option value="Alaskan Native">Alaskan Native</option>
<option value="American Indian">American Indian</option>
<option value="Black">Black</optio
<option value="Hispanic">Hispanic<
<option value="White">White</optio
</select></td>
<td><div align="right">Height: short; medium or tall</div></td>
<td><select name="height" id="height">
<option value="">--Select--</optio
<option value="short">short</optio
<option value="medium">medium</opt
<option value="tall">tall</option>
</select></td>
<td><div align="right">Birth year: </div></td>
<td><input type="text" name="birth_year" id="birth_year" onfocus="MM_effectHighligh
</tr>
</table></div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER