Start Building Professional
Web Apps Today

dhtmlxTabbar initial rendering problem in IE7

Hi,

When the dhtmlxTabbar initialization script is inside the <td> element, IE7 does not render the contents of the selected tab. This works in Firefox but not in IE7. Here is an example that results in rendering problem:

<link rel="STYLESHEET" type="text/css" href="dhtmlxtabbar.css">
<script src="dhtmlxcommon.js"></script>
<script src="dhtmlxtabbar.js"></script>

<h1 id="init_tabbar_from_script">Init tabbar from script</h1>
<table><tr><td>
<div id="a_tabbar" style="width:700px; height:390px;"/>
<div id='html_1'>Testing some text.</div>
<div id='html_2'>Testing second html text.</div>

<script>
tabbar = new dhtmlXTabBar("a_tabbar", "top");
tabbar.setSkin("modern");
tabbar.setSkinColors("#FF0000", "#FFFFFF");
tabbar.setImagePath("imgs/");
tabbar.addTab("a1", "Tab 1-1", "100px");
tabbar.addTab("a2", "Tab 1-2", "100px");
tabbar.addTab("a3", "Tab 1-3", "100px");
tabbar.setContent("a1", "html_1");
tabbar.setContent("a2", "html_2");
tabbar.setContentHTML("a3", "<br/>The content can be set as <b>HTML</b> node or as <b>HTML</b> text.");
tabbar.setTabActive("a1");
</script>
</td></tr></table>

The above problem goes away if table is not used. However, our layouts use tables, and table tags are located in external layout templates. Hence, it is hard to add the tabbar initialization script outside the table tags. Is there something that can be done to solve this without our having to remove table tags? Thanks for your help.