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> Link to comment https://forums.phpfreaks.com/topic/124452-tabbed-table-inner-text-ie-position-problem/ Share on other sites More sharing options...
obsidian Posted September 16, 2008 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/124452-tabbed-table-inner-text-ie-position-problem/#findComment-642894 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.