[solved] menu layout in IE7

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
pedes
Power Poster
Power Poster
Posts: 840
Joined: Tue Jan 27, 2009 11:47 am

[solved] menu layout in IE7

Post 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 !

Image

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
Last edited by pedes on Tue Jan 25, 2011 5:39 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: menu layout in IE7

Post 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;
}
pedes
Power Poster
Power Poster
Posts: 840
Joined: Tue Jan 27, 2009 11:47 am

Re: menu layout in IE7

Post 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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: menu layout in IE7

Post 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...
pedes
Power Poster
Power Poster
Posts: 840
Joined: Tue Jan 27, 2009 11:47 am

Re: menu layout in IE7

Post 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
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: menu layout in IE7

Post 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...
pedes
Power Poster
Power Poster
Posts: 840
Joined: Tue Jan 27, 2009 11:47 am

Re: menu layout in IE7

Post 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
Post Reply

Return to “Dutch - Nederlands”