Tabbed table inner text IE position problem

mark110384 · September 16, 2008

Hey guys I have the following coding, it is a tabbed table. It works excellently in FF but in IE the div inner text on the second tab is positioned below the first tab inner. Is there a way around this problem with IE?

<html>
<head>
<script type='text/javascript'>
function toggle(cell) {
if (cell == "P") {
	document.getElementById('charts').className= "deselected";
	document.getElementById('pubs').className= "selected";
	document.getElementById('charts_inner').style.visibility = "hidden";
	document.getElementById('charts_inner').style.height = "0px";
	document.getElementById('pubs_inner').style.visibility = "visible";
	document.getElementById('pubs_inner').style.height = "auto";
} else {
	document.getElementById('charts').className= "selected";
	document.getElementById('pubs').className= "deselected";
	document.getElementById('charts_inner').style.visibility = "visible";
	document.getElementById('charts_inner').style.height = "auto";
	document.getElementById('pubs_inner').style.visibility = "hidden";
	document.getElementById('pubs_inner').style.height = "0px";
}
}
</script>
<style type="text/css">

.selected {
border: solid 1px #DADADA;
background-color: #FFFFFF;
font-family: Arial;
font-size: 80%;
font-weight: bold;
}

.deselected {
border: solid 1px #CCCCCC;
background-color: #CCCCCC;
font-family: Arial;
font-size: 80%;
font-weight: normal;
cursor: pointer; 
}

.inner {
border: solid 1px #DADADA;
background-color: #FFFFFF;
font-family: Arial;
font-size: 11px;
}
</style>
</head>
<body>
  <table border="1" cellspacing='0' cellpadding='4' style='width:300px;'>
    <tr>
      <td id='charts' class='selected' width='10%' align='center' onClick='toggle("C");'>Charts</td>
      <td id='pubs' class='deselected' width='10%' align='center' onClick='toggle("P");'>Publications</td>
    </tr>      
    <tr>
      <td class='inner' colspan='2' align='center' width='100%' height="85" valign="top">
        <div id='charts_inner' style='visibility: visible'>
Charts Inner
</div>
<div id='pubs_inner' style='visibility: hidden; height: 0px;'>
Publications Inner
</div>
      </td>
    </tr>
  </table>
</body>
</html>

Sign In

Tabbed table inner text IE position problem

Recommended Posts

mark110384

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information