Menu expandcontent problems in IE 8
Posted: Sat Jun 27, 2009 10:08 am
I have a website (http://www.crescendomusical.net) that the menu works well in every browsers, but if I test in IE 8, the menu styling brokes after the first item...
The menu uses the javascript expandcontent to show and hide the subitems and that functionality still works in IE 8, but after the first parent item, I loose the css styling of the remaining menu items. I have to enable the compatibility option of IE 8 to make it works.
I've attached some images: ie8.png is what looks line in IE8, and other.png is what looks like in other browsers.
Anyone can help me? Thanks!
This is the menu code I'm using:
The menu uses the javascript expandcontent to show and hide the subitems and that functionality still works in IE 8, but after the first parent item, I loose the css styling of the remaining menu items. I have to enable the compatibility option of IE 8 to make it works.
I've attached some images: ie8.png is what looks line in IE8, and other.png is what looks like in other browsers.
Anyone can help me? Thanks!
This is the menu code I'm using:
Code: Select all
{if $count > 0}
<__script__ type="text/javascript" language="javascript" src="lib/helparea.js"></__script>
{assign var="withDiv" value="0"}
{assign var="closeSection" value="0"}
<div class="menu">
<ul id="menu">
{foreach from=$nodelist item=node}
{if $node->depth != 1}
{* ### CLOSE PREVIOUS SECTIONS ### *}
{if $node->depth < $node->prevdepth}
</li></ul>
{if $withDiv == "1"}</div>{/if}
{/if}
{* ### FIRST LEVEL ### *}
{if $node->depth == 2}
{if $node->type == 'sectionheader'}
{* ### SECTION ### *}
{if $node->parent == true}
{* ### SELECTED ### *}
<li><span class="sectionheader">{$node->menutext}</span>
<ul>
{assign var="withDiv" value="0"}
{else}
{* ### NOT SELECTED ### *}
<li><span class="sectionheader"><a onclick="expandcontent('sub{$node->id}')" style="cursor:hand; cursor:pointer">{$node->menutext}</a></span>
<div id="sub{$node->id}" class="expand">
<ul>
{assign var="withDiv" value="1"}
{/if}
{assign var="closeSection" value="1"}
{else}
{* ### NOT A SECTION ### *}
<li><span class="sectionheader">
<a {if $node->current == true}class="active"{/if} href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->menutext}</a>
</span></li>
{assign var="closeSection" value="0"}
{/if}
{* ### SECOND LEVEL ### *}
{else}
<li>
<a {if $node->current == true}class="active"{/if} href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->menutext}</a>
</li>
{/if}
{/if}
{/foreach}
{* ### LAST CLOSE ### *}
{if $closeSection == "1"}
</li></ul>
{if $withDiv == "1"}</div>{/if}
{/if}
</ul>
</div>
{/if}