Page 1 of 1
[solved] menu layout in IE7
Posted: Tue Jan 25, 2011 4:11 pm
by pedes
Ik ben er al een tijdje mee bezig maar kan het niet direct vinden ... wellicht kijk ik ernaast of erover
1/
eerste probleempje:
een websitewaarbij alles perfect loopt ...
enkel in IE7 heb ik een probleem met het sub-menu ... daar zie ik de sub-menu titels maar half (halve letters)
Iemand die een hint heeft om dit op te lossen ?
dit is de link van de site !
2/
tweede probleempje:
in deze zelfde website heb ik 2 menu's, horizontaal is het 1° level en het verticale menu is het 2° en 3° level
nu wil ik dat in het eerste level (hoofd-parent) ook de 'menuactive' opkomt als een sublevel (child) actief is.
de menu-links tonen in het hoofdmenu enkel de 'menuactive' layout als er geen sublevel is.
dit is het menu-template dat ik gebruik in het horizontale menu
{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true}
<li class="{$node->alias}"><a class="menuactive" href="{$node->url}" title="{$node->alias}">{$node->menutext}</a>
{elseif $node->current == true}
<li class="{$node->alias}"><a class="menuactive" href="{$node->url}" title="{$node->alias}">{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{else}
<li class="{$node->alias}"><a href="{$node->url}" title="{$node->alias}">{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Alvast bedankt.
Peter
Re: menu layout in IE7
Posted: Tue Jan 25, 2011 4:24 pm
by Dr.CSS
It's not the menu template but CSS that needs help, like in sone of the default menu style sheets you need the ie7/6 hack...
/* Fixes IE7 bug */
#primary-nav li, #primary-nav li.menuparent { these are to be changed to yours
min-height: 1em;
}
Re: menu layout in IE7
Posted: Tue Jan 25, 2011 4:40 pm
by pedes
thank you for your reply dr.CSS
but i don't realy understand your solution ??
I have 2 problems ... 1 with the menu-text only showing half when using IE7 and the other problem with the the top menu the is only showing the menuactive layout when there are no sublevels.
I also think that i need to import a IE7 hack to fix the first problem ... but how ?
For the second problem i think i'm missing some code in my menutemplate ?
Thanks for your reply
Peter
Re: menu layout in IE7
Posted: Tue Jan 25, 2011 4:44 pm
by Dr.CSS
The problem with menu text not showing correctly is needing the min-height:1em solution shown in my last post...
The problem with the top menu not getting any active class when on a sub page is a menu manager problem that is fixed in upcoming version 1.9.3...
Re: menu layout in IE7
Posted: Tue Jan 25, 2011 5:06 pm
by pedes
Dr.CSS wrote:The problem with menu text not showing correctly is needing the min-height:1em solution shown in my last post...
The problem with the top menu not getting any active class when on a sub page is a menu manager problem that is fixed in upcoming version 1.9.3...
i put the 'min-height: 1em;' in the 'li' css but no solution ... maybe i'm doing something wrong ...
this is the css code for the second and thirth menu level
/* ----menu level 2---- */
#submenu { float:left; width: 250px; margin: 1px 0 50px 0; padding: 0 ; text-align: left; }
#submenu ul { list-style: none; margin: 0 0 0 20px ; padding: 0; }
#submenu ul li { margin: 0 0 1px 0 ; padding: 0; }
#submenu ul li a { text-align: left; font-size: 12px; font-family: Lucida Sans Unicode ; display: block; padding: 8px 0 0 35px; text-decoration: none; color: #010101; width:250px; height: 22px; vertical-align: middle;border-bottom: 0px solid #ebebeb; background: url(/uploads/images/layout/submenu.jpg) no-repeat; }
#submenu ul li a:hover { text-align: left; font-size: 12px; font-family: Lucida Sans Unicode; display: block; padding: 8px 0 0 35px; text-decoration: none; color: #272727; width:250px; height: 22px; vertical-align: middle; background: url(/uploads/images/layout/submenu-hover.jpg) no-repeat; }
#submenu ul li a.menuactive { text-align: left; font-size: 12px; font-family: Trebuchet MS; font-weight: bold; display: block; padding: 8px 0 0 35px; text-decoration: none; color: #ebe6dc; width:250px; height: 22px; vertical-align: middle; background: url(/uploads/images/layout/submenu-active.jpg) no-repeat; }
/* ----menu level 3---- */
#submenu ul ul { list-style: none; margin: 0 ; padding: 0; }
#submenu ul ul li { margin: 1px 0 0 0 ; padding: 0; }
#submenu ul ul li a { text-align: left; font-size: 12px; font-family: Trebuchet MS; display: block; padding:10px 0 0 55px; text-decoration: none; color: #9e986e; width:200px; height: 22px; vertical-align: middle; border-bottom: 0px solid #ebebeb; background: url(/uploads/images/layout/subsubmenu.jpg) no-repeat;}
#submenu ul ul li a:hover { text-align: left; font-size: 12px; font-family: Trebuchet MS; display: block; padding: 10px 0 0 55px; text-decoration: none; color: #5f5b41; width:200px; height: 22px; vertical-align: middle; background: url(/uploads/images/layout/subsubmenu-hover.jpg) no-repeat; }
#submenu ul ul li a.menuactive { text-align: left; font-size: 12px; font-family: Trebuchet MS; font-weight: normal; display: block; padding: 10px 0 0 55px; text-decoration: none; color: #5f5b41; width:200px; height: 22px; vertical-align: middle; background: url(/uploads/images/layout/subsubmenu-active.jpg) no-repeat;}
Thks
Peter
Re: menu layout in IE7
Posted: Tue Jan 25, 2011 5:22 pm
by Dr.CSS
Part of the problem is that you use a fixed height on your a link and not padding, padding: 8px 0 0 35px; you should always use padding to get the height of the a link you need not a set height, BTW on the hover you only need to specify what you actually want to change, you don't need to repeat all the smae calls as the non hover state, is just redundant...
Re: menu layout in IE7
Posted: Tue Jan 25, 2011 5:38 pm
by pedes
thank you for your replys dr.CSS ... your name is correct !
i see the problem now , and i will be able to solve it
also thank you for the hint about the CMSMS 1.9.3 for the changing active class, hope it will be there soon
kind regards
Peter