DD Tab Menu works with IE7/8, not with Firefox, Safari and Chrome.

[vmehta]

1) Script Title: DD Tab Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm

3) Describe problem: I am using DD Tab Menu (colorTabs) to selectively show additional product details on my product detail page. Some of these descriptions are large, and on IE7/IE8 they work fine - in that there are other element "below" these tabs, and displaying the tabs "pushes down" the elements "below" these tabs. However, in all other browsers (Chrome, Firefox, Safari), these elements "below" the Tabs Menu does not get "pushed down" -- the detail for any large tab appears, but BEHIND the elements "below" the Tabs.

This can be seen on this page:

http://newstore.indianfoodsco.com/Grocery/ProdDesc.CFM?itemid=DFG12&Description=&Dept=IC&Cate=BL&SubCat= (http://newstore.indianfoodsco.com/Grocery/ProdDesc.CFM?itemid=DFG12&Description=&Dept=IC&Cate=BL&SubCat=)

This page has other Javascripts on it - the DropDown menu on the top, and the SlashDot menu on the left. I have created a test page that does NOT invoke the other two DynamicDrive menus, and uses ONLY the DD Tab Menus:

http://newstore.indianfoodsco.com/Grocery/ProdDesc-SIMPLE.CFM?itemid=DFG12&Description=&Dept=IC&Cate=BL&SubCat=

I get the same results. the code that I use to populate the menu details are as follows:


<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="ddtabs" class="ddcolortabs">
<ul>
<cfset tabs=0>
<cfif #ingredients# IS NOT ""> <li><a href="/" rel="sc1"><span> Ingredients </span> </a></li><cfset tabs=tabs+1></cfif>
<cfif #DirectionsForUse# IS NOT ""> <li><a href="/" rel="sc2"><span> Directions To Use </span> </a></li><cfset tabs=tabs+1></cfif>
<cfif #Hints# IS NOT ""> <li><a href="/" rel="sc3"><span> Notes </span> </a></li><cfset tabs=tabs+1></cfif>
<cfif #Notes# IS NOT ""> <li><a href="/" rel="sc4"><span> Recipes </span> </a></li><cfset tabs=tabs+1></cfif>
<cfif tabs GT 0> <li><a href="/" rel="sc5"><span> <> </span> </a></li></cfif>
</ul>
</div>
</td>
</tr>
<tr>
<td height="2" bordercolor="" bgcolor="#MainHeading#">
</td>
</tr>
<tr>
<td>
<div class="tabcontainer">
<cfif #ingredients# IS NOT ""> <div id="sc1" class="tabcontent"><a class = "Productname"><br>#Ingredients#<p> </a></div></cfif>
<cfif #DirectionsForUse# IS NOT ""> <div id="sc2" class="tabcontent"><a class = "ProductName"><br>#DirectionsForUse#<p> </a></div></cfif>
<cfif #Hints# IS NOT ""> <div id="sc3" class="tabcontent"><a class = "ProductName"><br>#Hints#<p> </a></div></cfif>
<cfif #Notes# IS NOT ""> <div id="sc4" class="tabcontent"><a class = "ProductName"><br>#Notes#<p> </a></div></cfif>
<cfif tabs GT 0> <div id="sc5" class="tabcontent"></div></cfif>
</div>
</td>
</tr>
</table>


What am I doing wrong? Can you help, please?

Thanks!

Vinay Mehta
Ethnic Foods Company.
vmehta@yahoo.com
(952) 593-9131

[vmehta]

ps... Words enclosed in #'s (such as #ingredients#) are server-side variables - i.e., they are replaced by actual text before the browser gets the html - as you can see in the "view source"...

pps...All <cf...> tags are ColdFusion server-side commands - they are evaluated before the browser gets the html code - so, conditional tags (<cfif>....<cfelse>....</cfif>) are evaluated and the results are included/excluded from the resulting html....

Vinay.

[vmehta]

:) -- Well, after some experimentation, I have solved the problem/issue....The problem goes away when the outer div is OUTSIDE a separate row (<tr><td>....</td></tr>), and the inner div is inside the row.

Here is the modified code (that now works!) - The modified portions are in red:


<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="ddtabs" class="ddcolortabs">
<ul>
<cfset tabs=0>
<cfif #ingredients# IS NOT ""> <li><a href="/" rel="sc1"><span> Ingredients </span> </a></li><cfset tabs=tabs+1></cfif>
<cfif #DirectionsForUse# IS NOT ""> <li><a href="/" rel="sc2"><span> Directions To Use </span> </a></li><cfset tabs=tabs+1></cfif>
<cfif #Hints# IS NOT ""> <li><a href="/" rel="sc3"><span> Notes </span> </a></li><cfset tabs=tabs+1></cfif>
<cfif #Notes# IS NOT ""> <li><a href="/" rel="sc4"><span> Recipes </span> </a></li><cfset tabs=tabs+1></cfif>
<cfif tabs GT 0> <li><a href="/" rel="sc5"><span> <> </span> </a></li></cfif>
</ul>
</div>
</td>
</tr>
<tr>
<td height="2" bordercolor="" bgcolor="#MainHeading#">
</td>
</tr>
<div class="tabcontainer"> <!-- Move OUTSIDE the <tr><td> -->
<tr>
<td>
<cfif #ingredients# IS NOT ""> <div id="sc1" class="tabcontent"><a class = "Productname"><br>#Ingredients#<p> </a></div></cfif>
<cfif #DirectionsForUse# IS NOT ""> <div id="sc2" class="tabcontent"><a class = "ProductName"><br>#DirectionsForUse#<p> </a></div></cfif>
<cfif #Hints# IS NOT ""> <div id="sc3" class="tabcontent"><a class = "ProductName"><br>#Hints#<p> </a></div></cfif>
<cfif #Notes# IS NOT ""> <div id="sc4" class="tabcontent"><a class = "ProductName"><br>#Notes#<p> </a></div></cfif>
<cfif tabs GT 0> <div id="sc5" class="tabcontent"></div></cfif>
</td>
</tr>
</div> <!-- Move OUTSIDE the </td></tr> -->
</table>


Vinay Mehta
Ethnic Foods Company.