CMS Made Simple Forums

Posted: **Fri May 25, 2007 3:17 pm**

Hello

I am having problems with the main horizontal menu on my new site. The site has three columns, the outer two fixed width and the central one fluid. The horizontal menu sits in the central column, and consists of 5 items, each 20% width (+/- 0.4% for IE errors...) of the central column.

It can be seen here: http://www.bath.ac.uk/ace/new/index.php?page=Welcome

It works fine in IE6 and IE7, but in Firefox I have the following problems:

The active button changes size whilst being 'active' but reverts on loading the new page
If the current page is a 'grandchild' of one of the horizontal menu items, the relevant menu item moves downwards by about 20px.
Clicking on this lowered top-menu item makes it revert back to its correct position, but doesn't take you to that page until you have clicked on it a second time.

To see the grandparent problem, try clicking on 'Programmes' then 'Postgraduate and Professional' then MSc Conservation (Buildings). To see it disappear click on any item in the left menu to go down another level -- great-grandparent/child relationship isn't affected.

I have removed the class="currentpage" and "activeparent" from the horizontal menu code -- this got rid of worse problems with the same layout. However, I don't understand the menumanager code enough (or CSS, for that matter) to work out why the grandparent of the current page is affected.

The code for the horizontal menu block is:

Department of

Architecture & Civil Engineering

{menu template='ACE_menu_top' start_level='2' number_of_levels='2'}

This is sitting inside & at the top of the central column.

The menu manager code is (with my small addition in red):

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *}
{if $count > 0}

{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}

{if $node->current == true}
url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{elseif $node->parent == true && $node->depth == 1}
url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}

{else}
url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}

{/if}

{/foreach}

{repeat string="" times=$node->depth-1}

{/if}

The relevant css is (and apologies in advance for all the IE6/IE7 hacks... I'm a real novice here)

#headerNavContainer {
width:100%;
padding: 84px 0px 0px 0px;
background-color:#003399;
}

/* IE6 Only */
* html #headerNavContainer {
width:100%;
padding: 0px;
background-color:#003399;
text-align:center;
}

/* IE7 Only */
*:first-child+html #headerNavContainer {
width:100%;
padding: 5px 0 0 0px;
background-color:#003399;
text-align:center;
}

.nav li { display:-moz-inline-box; -moz-box-orient:vertical;
display:inline-block; vertical-align:top; word-wrap:break-word; }
* html .nav li { display:inline; }
* + html .nav li { display:inline; }
.nav li > * { display:table; table-layout:fixed; overflow:hidden; }

.nav2 li > * {
width:19.5%;
height:28px;}

/* IE6 Only */
* html .nav2 li {
width:19.9%;
height:30px;
margin-top: 20px;
background-color:#003399;}

/* IE7 Only */
*:first-child+html .nav2 li {
width:19.9%;
height:28px;
margin-top: 20px;
background-color:#003399;}

.nav2 li a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:11px;
color:#FFFFFF;
background-color:#003399;
text-align:center;
line-height: 28px;}

/* IE6 Only */
* html .nav2 li a{
float: left;
width:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:11px;
color:#FFFFFF;
background-color:#003399;
line-height: 30px;}

/* IE7 Only */
*:first-child+html .nav2 li a{
float: left;
width:100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size:11px;
color:#FFFFFF;
background-color:#003399;
line-height: 30px;}

.nav2 li a:hover{
background-color:#3366cc;
color:#ffffff;
}
/* IE6 Only */
* html .nav2 li a:hover{
background-color:#3366cc;
color:#ffffff;
}

/* IE7 Only */
*:first-child+html .nav2 li a:hover{
background-color:#3366cc;
color:#ffffff;
}

.nav2 li a:visited{
color:#ffffff;
}

My apologies for the long chunks of code. Can anyone shed light on what might improve the problem? Has anyone had this problem before? (If so and it's in the archives of solved please forgive me, I couldn't find it.

thanks for taking the time to read this, and in advance for any advice offered.

CMS Made Simple Forums

Horizontal menu problem: "grandparent" of current page moves down in Firefox

Horizontal menu problem: "grandparent" of current page moves down in Firefox