Help with CSS - menu height

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:06

Help with CSS - menu height

Poster: tubize
Dated: Monday May 1 2006 - 17:26:24 BST

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.

Poster: Migru
Dated: Monday May 1 2006 - 18:42:18 BST

Hi

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

http://www.milonic.com/beginner.php

Michael

Poster: tubize
Dated: Monday May 1 2006 - 19:39:42 BST

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

Poster: Migru
Dated: Tuesday May 2 2006 - 0:51:37 BST

Hi

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

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

Michael

Poster: tubize
Dated: Tuesday May 2 2006 - 6:50:24 BST

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:

.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

Poster: Migru
Dated: Tuesday May 2 2006 - 9:56:12 BST

Hi

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

Quote:

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://www.milonic.com/menuproperties.php
http://www.milonic.com/itemproperties.php

Michael

Poster: tubize
Dated: Tuesday May 2 2006 - 10:47:01 BST

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

Poster: vikenk
Dated: Wednesday May 3 2006 - 0:40:22 BST

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:

.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:

/****** 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 :>)

Industrial Strength JavaScript and DHTML Menus

Help with CSS - menu height