Forums (Obsolete)

Member

suranavarun-gmail - 2/28/2011 8:27:31 PM

CMSMenu

Hello Everybody,

We are facing a strange problem with our Menu where in our sub menu items show a gap between each item and also when we click on any of the menu item the menu gets distorted.

Please let me know as to from where i can fix this issue as i tried modifying the css but it didnot help me. below is the code snippet for CSS

.subCMSMenu
{
height:21px;
/*border-left:1px solid #627481;
border-right:1px solid #627481;*/
border-top:0;
border-bottom:0;
background-image:url(../App_themes/EleStyle/images/menu_bg.gif);
background-repeat:repeat-x;
color:#000000;
font-family:Arial;
font-size:12px;
}

.subCMSMenuItem,.subCMSMenuItemMouseDown,.subCMSMenuItemMouseUp,
.subCMSMenuHighlightedMenuItem,.subCMSMenuHighlightedMenuItemMouseDown,
.subCMSMenuHighlightedMenuItemMouseOver,
.subCMSMenuHighlightedMenuItemMouseUp
{
height:21px;
border-right:1px solid #627481;
color:#000000;
font-family:Arial; font-size:12px;
text-align:center;
width:210px;
}

.SeparatorCMSMenu
{
background-image:url(../App_themes/EleStyle/images/menu_separator.gif);
height:21px;
color:#000000;
}

.subCMSMenuItemMouseOver
{
color:#FFFFFF;
border-right:1px solid #627481;
background-image:url(../App_themes/EleStyle/images/menu_hover.gif);
background-repeat:repeat-x;
width:210px;
text-align:center;font-size:12px;
height:21px;

}

/* For SubMenuItems */

.sub2CMSMenu
{
/*margin-bottom:2px;
border-left:1px solid #627481;
border-right:1px solid #627481;
background-image:url(../App_themes/EleStyle/images/menu_bg.gif);
background-image:url(../App_themes/EleStyle/images/menu_hover.gif);
background-image: url("../App_themes/EleStyle/images/menu_bg.gif");*/

height:28px;
/*background-repeat:repeat-x;*/
width:150px;
color:#ffffff;
font-family:Tahoma;
font-size:12px;
text-align:center;
}

.sub2CMSMenuItem
{
color:#000000;
background-image:url("../App_themes/EleStyle/images/menu_bg.gif");
background-repeat:repeat-x;
/*background-position:top left;*/
padding:0;margin:0; width:210px;
text-align:center;
font-size:12px;
height:28px;

}
.sub2CMSMenuItemMouseDown,.sub2CMSMenuItemMouseUp,
.sub2CMSMenuHighlightedMenuItem,.sub2CMSMenuHighlightedMenuItemMouseDown,
.sub2CMSMenuHighlightedMenuItemMouseOver,
.sub2CMSMenuHighlightedMenuItemMouseUp
{
height:28px;
/*border-right:1px solid #627481;*/
background-repeat:repeat-x;
color:#FFFFFF;
font-family:Tahoma; font-size:12px;
width:200px;
text-align:center;
/*background-image:url(../App_themes/EleStyle/images/menu_bg.gif);*/
background-image:url(../App_themes/EleStyle/images/menu_hover.gif);
}

.sub2CMSMenuItemMouseOver
{
color:#FFFFFF;
background-image:url(../App_themes/EleStyle/images/menu_hover.gif);
background-repeat:repeat-x;
background-position:top left;
width:200px;
text-align:center;
font-size:12px;
height:28px;
}

Looking forward to hear from you soon.


Member	Kit-Webtech - 3/4/2011 8:35:12 AM RE:CMSMenu If you have not been helped yet, can you please post a link to the site, or a screen shot of the issue? It is easier to trouble shoot when you can see what you're looking for :)

Kentico Developer

kentico_ondrejv - 3/9/2011 1:21:47 AM

RE:CMSMenu

Hello,

we've solved this issue over an e-mail conversation (he has a valid maintenance), and I'd like to post here the solution:

Concerning the menu items skipping on mouse click (connected with the Drop down menu wepbart), this is caused by incorrect CSS styles for the onmouseup and onmousedown events, which use the following CSS classes: CMSMenuItemMouseUp and CMSMenuItemMouseDown, respectively. You could try to disable the Enable mouse up/down class option within the menu properties.

However, both problems were solved simply by changing the Drop down menu webpart by the CSS List Menu webpart. It is easier to style it and maintain since it is completely CSS driven (no table layout and JavaScript = better accessibility of the site).

Best regards
Ondrej Vasil