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.
Help with CSS - menu height
Hi
my suggestion is, study this, could be your styles settings, e.g. different padding and margin settings.
http://milonic.com/beginner.php
Michael
my suggestion is, study this, could be your styles settings, e.g. different padding and margin settings.
http://milonic.com/beginner.php
Michael
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
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
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:
Thanks for your help on this.
John
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;
}
John
Hi
my suggestion is to use itemheight rather than line-height, and set itemheight directly as part of the menu/item properties.
http://milonic.com/menuproperties.php
http://milonic.com/itemproperties.php
Michael
my suggestion is to use itemheight rather than line-height, and set itemheight directly as part of the menu/item properties.
Seeitemheight 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.
http://milonic.com/menuproperties.php
http://milonic.com/itemproperties.php
Michael
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:
Here's an example of some CSS styleing from one of my sites:
Hope this helps :>)
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;
}
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 ****/