mark110384 Posted September 16, 2008 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.