Help with CSS - menu height

tubize · Post by **tubize** » Mon May 01, 2006 5:26 pm

I am using the Milonic menu both horizontally across the top and vertically for my left nav on all pages of my site. It is working beautifully except that I am getting different line heights on some sub-menus than on others. If you go to this page - http://www.expat-online.com/living/clubs/index.cfm - you should see the submenus for Miscellaneous in the left nav to be higher than the menus below for Organizations and Churches. Can anyone tell me what can be causing this and what I need to do to get them all the same height as the Organization and Churches submenus.
Thanks.

Migru · Post by **Migru** » Mon May 01, 2006 6:42 pm

Hi

my suggestion is, study this, could be your styles settings, e.g. different padding and margin settings.

http://milonic.com/beginner.php

Michael

tubize · Post by **tubize** » Mon May 01, 2006 7:39 pm

I don't have separate style settings for line items in the menu, just one for the horizontal menu and one for the vertical menu. I don't think that this is the answer.

Thanks

John

Migru · Post by **Migru** » Tue May 02, 2006 12:51 am

Hi

I just "guessed", because I had no time to figure out, where you have your menu code and the styles settings.

http://milonic.com/forum/viewtopic.php?t=4410

Michael

tubize · Post by **tubize** » Tue May 02, 2006 6:50 am

Michael, I am using a combination of code in the menu itself and css. The code in the menu can be found at http://www.expat-online.com//navigation/top_menu.cfm and the css code is as follows:

Code: Select all

.cssmouseon {
color:#ffffcc;
line-height:10px;
border:#FFFFFF solid thin;
menuwidth:980;
menu-align:center;
font-size:12;
font-style:normal;
font-weight:bold;
margin:0 7px 0 7px;
border-top:#8B5124;
border-bottom:#8B5124;
font-family:Verdana, Arial;
}       
.cssmouseoff {
color:#003366;
line-height:10px;
border:#FFFFFF solid thin;
menuwidth:980;
menu-align:center;
font-size:12;
font-style:normal;
font-weight:bold;
margin:0 7px 0 7px;
border-top:#8B5124;
border-bottom:#8B5124;
font-family:Verdana, Arial;
}
		
.cssmouseon_ver {
color:#ffffcc;
line-height:10px;
border:#FFFFFF;
menuwidth:980;
menu-align:left;
font-size:12;
font-style:normal;
font-weight:bold;
font-family:Verdana, Arial;
pagecolor:#cccc99;
background-color:#BBA97C;
header-color:#ffffff;
headerbgcolor:#8B5124;

}       
.cssmouseoff_ver {
color:#003366;
line-height:15px;
border:#FFFFFF;
menuwidth:980;
menu-align:left;
font-size:12;
font-style:normal;
font-weight:bold;
font-family:Verdana, Arial;
pagecolor:#cccc99;
background-color:#BBA97C;
header-color:#ffffff;
headerbgcolor:#8B5124;
        }

Thanks for your help on this.

John

Migru · Post by **Migru** » Tue May 02, 2006 9:56 am

Hi

my suggestion is to use itemheight rather than line-height, and set itemheight directly as part of the menu/item properties.

itemheight 18 itemheight is used for forcing the menu to use the specified height for each menu item. This property works in both horizontal and vertical mode.

See
http://milonic.com/menuproperties.php
http://milonic.com/itemproperties.php

Michael

tubize · Post by **tubize** » Tue May 02, 2006 10:47 am

Can you check my code on this? I am using menuheight="10"; and I get a different height for off and on. I do not think you need a different line for menu off and menu on.

Thanks

John

vikenk · Post by **vikenk** » Wed May 03, 2006 12:40 am

Hi,

Check your CSS again. There are two main CSS errors in you code: You're not using true CSS, you're using menu variables in CSS format, and you haven't specified the unit types with your numerical values.

1) Example: menuwidth and menu-align, headerbgcolor and header-color are not CSS commands, they're menu variables. Put them back in the manu-data file

2) Your numerical values are incomplete. Example: "menuwidth:980;". 980 what? Pixels? Percent? em? You need to specify the unit type.

If you want to style your menu width with css, you need to style a table since the menu is table based. For example:

Code: Select all

.cssmouseon { 
color:#ffffcc; 
line-height:10px; 
border:#FFFFFF solid thin; 
font-size:12; 
font-style:normal; 
font-weight:bold; 
margin:0 7px 0 7px; 
border-top:#8B5124; 
border-bottom:#8B5124; 
font-family:Verdana, Arial; 
}

.cssmouseon table {
width: 980px;
text-align: center;
}

Here's an example of some CSS styleing from one of my sites:

Code: Select all

/****** Below CSS STYLES THE MILONIC MENU  *****/
.menu table {
width: 90%;
text-align: center;
}

.menu table td {
padding: 3px 5px;
vertical-align: top;
}

.menu table td a {
text-decoration: none;
}

.submenu table td {
padding: 3px 5px;
}

.submenu table td a {
text-decoration: none;
} 

.menu img {
border: none;
}

.submenu img {
border: none;
}

/***** END MENU STYLING ****/

Hope this helps :>)