Firefox works, IE doesn't, CSS Display: none

[tiamat2012]

I'm trying to create a very easy menu for database entry, and depending on what is chosen in a select box, it displays different things. I'm using javascript to do the change, but it has more html and css then javascript, so I'll post all applicable code here (and as the title says, it works perfectly in Firefox, and not in IE)

<style type="text/css">
.propclass {
	display: none;
}
</style>

<script language="javascript" type="text/javascript">

function change()
{
	var i = document.MyForm.propertytype.selectedIndex;
	var name = document.MyForm.propertytype[i].value;
	var former = document.getElementById(document.getElementById("former").value).style.display;
	
	if (name != "blank") {
		if(document.getElementById(document.getElementById("former").value).style.display != "none") {
			document.getElementById(document.getElementById("former").value).style.display="none";
			}
		document.getElementById(name).style.display="table";	
		document.getElementById("former").value=name;
	}
	
}
</script>

and now for the html

<div align="left">
  <p align="center">
      <font size="7"><strong>Add A House</strong></font> 
    </p>

<form name="MyForm" action="add.php" method="post" enctype="multipart/form-data">
    <table>
      <tr> 
        <td width="156"><div align="left"><font size="5">Property Type:</font></div></td>
        <td width="659" > <div align="left"> 
          <select name="propertytype" onChange="change();">
		  <option selected value="blank"></option>
		  <option value="residential">Residential</option>
		  <option value="commercial">Commercial</option>
		  <option value="land">Land</option>
		  <option value="farmranch">Farm/Ranch</option>
		  </select>
          </div></td>
		  
        <td><input type="Submit" value="Add" tabindex="-1">
          <input type="button" value = "Back" onClick="Back();" tabindex="-1">
		  <input type="hidden" value="commercial" id="former"></td>
      </tr>
	</table>
	
    <table id="residential" class="propclass">
	  <tr> 
        <td><div align="left"><font size="5">Type:</font></div></td>
        <td><input name="address" type="text" value="" maxlength="50"></td>
      </tr>
       <tr> 
        <td><div align="left"><font size="5">City:</font></div></td>
		<td><input name="city" type="text" maxlength="50" value=""></td>
      </tr>
	  <tr> 
        <td><div align="left"><font size="5">State:</font></div></td>
		<td><input name="state" type="text" maxlength="2" value=""></td>
      </tr>
	  <tr> 
        <td><div align="left"><font size="5">Zip:</font></div></td>
        <td><input name="zip" type="text" value="" maxlength="5"> </td>
      </tr>
	</table>
	
	<table id="commercial" class="propclass">
	  <tr> 
        <td><div align="left"><font size="5">Phone Number:</font></div></td>
        <td><input name="phone" type="text" value="" maxlength="20"></td>
      </tr>
	  	  <tr> 
        <td><div align="left"><font size="5">E-Mail:</font></div></td>
        <td><input name="email" type="text" value="" maxlength="50"> </td>
      </tr>
	  <tr> 
        <td><div align="left"><font size="5">Website:</font></div></td>
        <td><input name="website" type="text" value="" maxlength="50"></td>
      </tr>
	  <tr> 
        <td><div align="left"><font size="5">Additional Data:</font></div></td>
        <td><textarea name="adddata" cols="33" rows="3" wraph="PHYSICAL" id="bustype" onKeyDown="javascript:whichkey();"></textarea></td>
      </tr>
	  
</table>
</form>
</div>

I'd give a link but its behind a password that I can't give out :\

Thank you,
Kerry

 

[ChrisHunt]

document.getElementById(name).style.display="table";

I suspect that IE chokes on [tt]display:table;[/tt] and may need [tt]display:block[/tt] instead. Perhaps you could store the initial, visible, value of the display property in a variable instead of hard-coding it?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd