Display div takes 2 clicks in IE 1

[jmaddone]

I have a tab system that uses <div>s that contains the <table>s of each tab. It works great in all browsers (Moz, Safari, FFox, Opera, etc.), but not in the Windows version of IE. When I click on the tab it calls a javascript function that changes the CSS class that controls the display and position style of that specific <div>. In IE, I click once it shows the space for the table inside the div, but it is invisble until I click the tab one more time. In all other browsers it takes only one click. Also it only happens with <table>s inside of <div>s.

Code Snipits:

									<div id="Summary" class="VisibleTab">
										<table>
											<tr>
												<td>
													<asp:Button id="btnOpen" runat="server" Text="Open"></asp:Button>
												</td>
												<td>
													<iframe id="Orders" src="orders.aspx"></iframe>
												</td>
											</tr>
										</table>
									</div>

document.getElementById("Summary").className="VisibleTab";
						document.getElementById("Monitoring").className="NotVisibleTab";
						document.getElementById("Commands").className="NotVisibleTab";
						document.getElementById("Notes").className="NotVisibleTab";
						document.getElementById("Intervensions").className="NotVisibleTab";
						document.getElementById("Patients").className="NotVisibleTab";

.VisibleTab
{
	display:inline;
	position:relative;
}

.NotVisibleTab
{
	display:none;
	position:absolute;
}

Thanks

 

[BillyRayPreachersSon]

Not sure if this would be the cause of your problem or not, but try removing the "position:absolute" from the NotVisibleTab class... From what I can see, given that the tab is not displayed, setting the position is pointless.

Hope this helps,
Dan

 

[jmaddone]

That fixed it. Star for you.

Thanks