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>

obsidian · September 16, 2008

First question: why are you using tables for this?

To answer your question directly, since you are using visibility to change the appearance, the physical location of the div is still retained in the rendering. If you use display: none and display: block instead of visibility: hidden to show and hide the divs, you may be better off across browsers.

Sign In

Tabbed table inner text IE position problem

Recommended Posts

mark110384

Link to comment

Share on other sites

obsidian

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information