Latest version of menu ignores CSS styles

[vikenk]

Hello everyone,

It has been some time since I've been on this forum. I had stopped updating my version of the menu because at one point, the released version started ignoring my css styles. I was never able to figure out why. Just a few days ago I tried updating the menu version again and the menu still ignores my CSS styling and I am STILL unable to figure out why. I have a style in my external style sheet and I reference the style in my menu_data file just as instructed in the instructions. Simply replacing the old version of milonic_src.js and mmenudom.js with the new version causes my menu to go wacky. I'm going to give this another try.

My css styling is below:

Code: Select all

table#menutable {			/* Controls the width of the table that houses the menu */
	text-align: center;
	width: 99%;
	margin-bottom: 10px;
}

.menu table {				/* Controls the width of menu its self. */
	width: 100%;	
	text-align: center;
	margin: 0 auto;		/* Added margin on 08/28/06 to center menu in Firefox browsers */
}

.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;
}

and my menu styling is below:

Code: Select all

with(menuStyle=new mm_style()){
offclass="menu";
onclass="menu";
fontfamily="trebuchet ms, tahoma, arial, sans-serif";
fontsize="12pt";
fontsize="11pt";
fontweight="bold";
bordercolor="#ff0000";
borderstyle="solid";
borderwidth=1;
onborder="solid #ff0000 1px";
headerbgcolor="#000000";
headercolor="#ff9900";
offbgcolor="#000000";
offcolor="#ff9900";
onbgcolor="#ff9900";
oncolor="#000000";
pagebgcolor="";
pagecolor="";
separatorcolor="#ff0000";
separatorsize=0;
subimage="menu_arrow_orange.gif";
onsubimage="menu_arrow_black.gif";
subimagepadding=0;
subimageposition="center";
overfilter="Alpha(opacity=100);Shadow(color=#999999', Direction=135, Strength=6);";
} 

with(sub=new mm_style()){
offclass="submenu";
onclass="submenu";
align="left";
bordercolor="#ff0000";
borderstyle="solid";
borderwidth=1;
fontfamily="trebuchet ms, tahoma, arial, sans-serif";
fontsize="11pt";
//fontsize="10.5pt";
fontweight="bold";
headerbgcolor="#000000";
headercolor="#ff9900";
offbgcolor="#000000";
offcolor="#ff9900";
onbgcolor="#ff9900";
oncolor="#000000";
pagebgcolor="";
pagecolor="";
separatorcolor="#ff0000";
separatorsize=1;
subimage="menu_arrow_orange_right.gif";
onsubimage="menu_arrow_black_right.gif";
subimagepadding=0;
subimageposition="right";
overfilter="Alpha(opacity=100);Shadow(color=#999999', Direction=135, Strength=6)";
overfilter="GradientWipe(WipeStyle=1, size=1.00, motion='Forward', duration=0.4)"; 
//outfilter="Blinds(bands=1, direction='Up', duration=0.4)"; 
//overfilter="Blinds(bands=1, direction='Down', duration=0.5)";
}

The above produces the menu that is seen on this site: http://www.sayatnova.com. Note that it is evenly spaced with all the text aligned to the top and the arrow images below. The menu also shrinks and expands to accommodate different screen sizes.

When I update the menu to the latest version, all my CSS is ignored and the menu is all scrunched up on the left side with uneven text and uneven spacing. It has no padding whatsoever. See the attached screen shot below. This happens in every browser.

Anyone have any idea why this is happening? Again, all I have done is replaced the milonic_src and mmenudom files. All other files are untouched. I have stopped updating the menu because of this behavior.

Thanks.

[Andy]

Hi,

As the versions are quite different what we'll do is install the new version of the menu and adapt your website to it.

Here is a copy of your sndc.css file with some changes:

Code: Select all

BODY {
	TEXT-ALIGN: left; PADDING-BOTTOM: 5px; LINE-HEIGHT: 110%; MARGIN: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: "trebuchet ms", tahoma, arial, sans-serif; BACKGROUND: url(../images/backgrounds/background_logo_main.jpg) #000000 fixed no-repeat 4px 4px; COLOR: white; FONT-SIZE: 100%; PADDING-TOP: 5px
}
#wrap {
	WIDTH: auto; MARGIN-LEFT: 206px
}
DIV#content {
	MARGIN: 0px auto; WIDTH: 95%
}
DIV.subcontent {
	MARGIN: 0px auto 25px; MIN-HEIGHT: 365px; WIDTH: 90%; HEIGHT: auto; CLEAR: both
}
DIV#mission {
	BORDER-BOTTOM: white 1px solid; TEXT-ALIGN: center; BORDER-LEFT: white 1px solid; PADDING-BOTTOM: 0px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #555555; CLEAR: both; BORDER-TOP: white 1px solid; BORDER-RIGHT: white 1px solid; PADDING-TOP: 0px
}
DIV.quote {
	TEXT-ALIGN: center; PADDING-BOTTOM: 15px; LINE-HEIGHT: 125%; MARGIN: 5px 0px 5px 10px; PADDING-LEFT: 15px; WIDTH: 250px; PADDING-RIGHT: 15px; FLOAT: right; HEIGHT: auto; COLOR: white; FONT-SIZE: 22px; PADDING-TOP: 15px
}
DIV.quote:first-letter {
	FONT-VARIANT: normal; FONT-FAMILY: "arial black"; FONT-SIZE: 32px
}
DIV#dvd_artwork {
	WIDTH: 260px; FLOAT: left; HEIGHT: 520px; MARGIN-RIGHT: 20px
}
DIV.mompic {
	TEXT-ALIGN: center; MARGIN: 0px 20px 20px 0px; WIDTH: 302px; FLOAT: left
}
DIV.mompic IMG {
	BORDER-BOTTOM: #888888 1px solid; BORDER-LEFT: #888888 1px solid; MARGIN: 0px 0px 3px; BORDER-TOP: #888888 1px solid; BORDER-RIGHT: #888888 1px solid
}
A:link {
	COLOR: #0099ff
}
A:visited {
	COLOR: #ff9000
}
A:hover {
	COLOR: #ff0000; TEXT-DECORATION: none
}
A:active {
	COLOR: #ff0000
}
A.newwin {
	BACKGROUND-IMAGE: url(../images/new_window_current.gif); TEXT-ALIGN: left; PADDING-RIGHT: 14px; DISPLAY: inline-block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right center; MARGIN-RIGHT: 2px
}
A.newwin:visited {
	BACKGROUND-IMAGE: url(../images/new_window_current_orange.gif)
}
A.newwin:hover {
	BACKGROUND-IMAGE: url(../images/new_window_current_red.gif)
}
A.newwin:active {
	BACKGROUND-IMAGE: url(../images/new_window_current_red.gif)
}
A.collapse {
	BACKGROUND-IMAGE: url(../images/arrow_collapse_lightblue.gif); BORDER-BOTTOM: #0099ff 1px dashed; TEXT-ALIGN: left; PADDING-RIGHT: 20px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right center; COLOR: #0099ff; CURSOR: pointer; MARGIN-RIGHT: 5px
}
A.dark.collapse {
	BACKGROUND-IMAGE: url(../images/arrow_collapse.gif); BORDER-BOTTOM: #0000ff 1px dashed; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right center; COLOR: #0000ff
}
UL.inline A:link {
	COLOR: #0099ff; TEXT-DECORATION: none
}
UL.inline A:visited {
	COLOR: #0099ff; TEXT-DECORATION: none
}
UL.inline A:hover {
	BORDER-BOTTOM: 1px dashed; COLOR: #ff0000
}
UL.inline A:active {
	COLOR: #ff0000; TEXT-DECORATION: none
}
H1 {
	TEXT-ALIGN: center; FONT-STYLE: italic; MARGIN: 10px 0px 30px; FONT-SIZE: 160%; FONT-WEIGHT: bold; TEXT-DECORATION: underline
}
H1.black {
	COLOR: black
}
H1.pictures {
	MARGIN: 5px 0px 10px; FONT-SIZE: 130%
}
H1.small {
	FONT-SIZE: 110%
}
H1.links {
	TEXT-ALIGN: left; LINE-HEIGHT: 150%; MARGIN-BOTTOM: 10px; FONT-SIZE: 135%
}
H2 {
	FONT-SIZE: 125%
}
.faq H2 {
	FONT-STYLE: italic; MARGIN-TOP: 50px; MARGIN-BOTTOM: 20px; TEXT-DECORATION: underline
}
DIV#mission H2 {
	MARGIN: 8px 0px 10px
}
BODY.pictures P {
	MARGIN-TOP: 5px; MARGIN-BOTTOM: 5px
}
DIV#mission P {
	MARGIN-TOP: 0px
}
P.big:first-letter {
	PADDING-BOTTOM: 0px; LINE-HEIGHT: 100%; PADDING-LEFT: 0px; PADDING-RIGHT: 5px; FONT-FAMILY: verdana, arial, "times new roman"; FLOAT: left; FONT-SIZE: 32pt; FONT-WEIGHT: bold; PADDING-TOP: 0px
}
.highlightblack {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: yellow; COLOR: black; FONT-SIZE: 110%; FONT-WEIGHT: bold; MARGIN-RIGHT: 7px; PADDING-TOP: 0px
}
.highlightred {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; BACKGROUND: yellow; COLOR: red; FONT-SIZE: 110%; FONT-WEIGHT: bold; MARGIN-RIGHT: 7px; PADDING-TOP: 0px
}
.yellow {
	COLOR: #ffff00
}
.red {
	COLOR: #ff0000
}
.blue {
	COLOR: #0000ff
}
.lightblue {
	COLOR: #0099ff
}
.fineprint {
	LINE-HEIGHT: 1.1em; FONT-SIZE: 80%
}
.largetext {
	LINE-HEIGHT: 115%; FONT-SIZE: 110%
}
.xl {
	LINE-HEIGHT: 100%; FONT-SIZE: 140%
}
.bold {
	FONT-WEIGHT: bold
}
.italic {
	FONT-STYLE: italic
}
.underline {
	TEXT-DECORATION: underline
}
.right {
	TEXT-ALIGN: right
}
.left {
	TEXT-ALIGN: left
}
.center {
	TEXT-ALIGN: center
}
.question {
	COLOR: #ff9000
}
SUP {
	FONT-SIZE: 75%
}
.clear {
	CLEAR: both
}
TABLE.contact {
	PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; WIDTH: 100%; PADDING-RIGHT: 5px; BORDER-COLLAPSE: collapse; VERTICAL-ALIGN: top; PADDING-TOP: 5px
}
TABLE.contact TD {
	PADDING-BOTTOM: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; VERTICAL-ALIGN: top; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
TABLE.thumbs {
	MARGIN: 0px auto; WIDTH: 90%
}
TABLE.thumbs IMG {
	BORDER-BOTTOM: #777 1px solid; BORDER-LEFT: #777 1px solid; BORDER-TOP: #777 1px solid; BORDER-RIGHT: #777 1px solid
}
TABLE.thumbs TD {
	TEXT-ALIGN: center; PADDING-BOTTOM: 5px; LINE-HEIGHT: 100%; MARGIN-TOP: 5px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; MARGIN-BOTTOM: 5px; FONT-SIZE: 80%; PADDING-TOP: 5px
}
TABLE#apparel {
	WIDTH: 99%; BORDER-COLLAPSE: collapse
}
TABLE#apparel TD {
	BORDER-BOTTOM: #888888 1px solid; BORDER-LEFT: #888888 1px solid; PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; VERTICAL-ALIGN: top; BORDER-TOP: #888888 1px solid; BORDER-RIGHT: #888888 1px solid; PADDING-TOP: 10px
}
TABLE#apparel TD TABLE.paypal TD {
	BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: medium none; BORDER-RIGHT: medium none; PADDING-TOP: 0px
}
TABLE#snaphost {
	MARGIN: 0px auto
}
FORM.contact {
	BORDER-BOTTOM: #777777 1px solid; POSITION: relative; BORDER-LEFT: #777777 1px solid; PADDING-BOTTOM: 10px; MARGIN: 0px auto; PADDING-LEFT: 10px; WIDTH: 650px; PADDING-RIGHT: 10px; BORDER-TOP: #777777 1px solid; BORDER-RIGHT: #777777 1px solid; PADDING-TOP: 10px
}
FORM.guestbook {
	BORDER-BOTTOM: white 1px solid; TEXT-ALIGN: center; BORDER-LEFT: white 1px solid; PADDING-BOTTOM: 10px; MARGIN: 0px auto; PADDING-LEFT: 10px; WIDTH: 600px; PADDING-RIGHT: 10px; BACKGROUND: #555555; BORDER-TOP: white 1px solid; BORDER-RIGHT: white 1px solid; PADDING-TOP: 10px
}
DT {
	BACKGROUND-IMAGE: url(../images/arrow.jpg); PADDING-LEFT: 20px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: left center; MARGIN-BOTTOM: 20px; VERTICAL-ALIGN: top; FONT-WEIGHT: bold
}
DD {
	BORDER-BOTTOM: #ffffff 1px ridge; PADDING-BOTTOM: 7px; MARGIN-BOTTOM: 30px
}
UL.inline {
	TEXT-ALIGN: center; PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px auto; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-SIZE: 120%; PADDING-TOP: 0px
}
UL.inline LI {
	PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: inline; FONT-WEIGHT: bold; MARGIN-RIGHT: 15px; PADDING-TOP: 0px
}
DIV.faq#content LI {
	PADDING-BOTTOM: 3px; MARGIN-BOTTOM: 0px
}
LI {
	MARGIN-BOTTOM: 5px
}
LI.arrow {
	LIST-STYLE-IMAGE: url(../images/arrow.jpg)
}
.faq UL {
	LIST-STYLE-TYPE: none
}
UL.plain {
	LIST-STYLE-TYPE: none
}
UL.plain LI {
	MARGIN-BOTTOM: 10px
}
.portrait {
	BORDER-BOTTOM: white 5px solid; BORDER-LEFT: white 5px solid; MARGIN: 0px 15px 15px; FLOAT: right; BORDER-TOP: white 5px solid; BORDER-RIGHT: white 5px solid
}
IMG.right {
	MARGIN: 5px 0px 5px 15px; FLOAT: right
}
IMG.left {
	MARGIN: 5px 15px 5px 0px; FLOAT: left
}
#apo {
	BORDER-BOTTOM: white 5px solid; BORDER-LEFT: white 5px solid; MARGIN: 0px 15px 0px 0px; FLOAT: left; BORDER-TOP: white 5px solid; BORDER-RIGHT: white 5px solid
}
#flag {
	Z-INDEX: 1; POSITION: absolute; TOP: 180px; LEFT: 162px
}
#brochure {
	BORDER-BOTTOM: #888888 1px solid; BORDER-LEFT: #888888 1px solid; MARGIN-TOP: 5px; BORDER-TOP: #888888 1px solid; BORDER-RIGHT: #888888 1px solid
}
#joinsndc {
	Z-INDEX: 1; MARGIN: 0px 20px; FLOAT: left
}
.newwin {
	MARGIN-LEFT: 5px
}
.thumb {
	BORDER-BOTTOM: #888888 1px solid; BORDER-LEFT: #888888 1px solid; FLOAT: left; BORDER-TOP: #888888 1px solid; MARGIN-RIGHT: 10px; BORDER-RIGHT: #888888 1px solid
}
.apparel_thumb {
	BORDER-BOTTOM: #888888 1px solid; BORDER-LEFT: #888888 1px solid; FLOAT: left; BORDER-TOP: #888888 1px solid; CURSOR: pointer; MARGIN-RIGHT: 25px; BORDER-RIGHT: #888888 1px solid
}
#slideshow {
	BORDER-BOTTOM: #888888 1px solid; BORDER-LEFT: #888888 1px solid; BORDER-TOP: #888888 1px solid; BORDER-RIGHT: #888888 1px solid
}
#welcome {
	VERTICAL-ALIGN: middle
}
#promo {
	BORDER-BOTTOM: #888888 1px solid; BORDER-LEFT: #888888 1px solid; PADDING-BOTTOM: 1px; MARGIN: 20px auto 0px; PADDING-LEFT: 1px; WIDTH: 420px; PADDING-RIGHT: 1px; HEIGHT: 360px; BORDER-TOP: #888888 1px solid; BORDER-RIGHT: #888888 1px solid; PADDING-TOP: 1px
}
#promo_alt {
	BORDER-BOTTOM: #888888 1px solid; BORDER-LEFT: #888888 1px solid; PADDING-BOTTOM: 1px; MARGIN: 20px auto 0px; PADDING-LEFT: 1px; WIDTH: 320px; PADDING-RIGHT: 1px; HEIGHT: 215px; BORDER-TOP: #888888 1px solid; BORDER-RIGHT: #888888 1px solid; PADDING-TOP: 1px
}
.blank {
	TEXT-ALIGN: center; PADDING-BOTTOM: 20px; MARGIN: 0px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; BACKGROUND: black; COLOR: white; PADDING-TOP: 20px
}
.join {
	TEXT-ALIGN: left; MIN-HEIGHT: 600px; BACKGROUND: url(../images/dancer.jpg) black no-repeat left 25px; HEIGHT: 600px; FONT-WEIGHT: bold
}
.join P {
	PADDING-LEFT: 35%; WIDTH: 65%
}
.rehearsal {
	TEXT-ALIGN: left; MARGIN: 0px auto; MIN-HEIGHT: 600px; WIDTH: 680px; BACKGROUND: url(../images/backgrounds/bg_reh_2.jpg) black no-repeat right 50px; HEIGHT: 600px
}
.rehearsal P {
	WIDTH: 63%
}
TABLE#menutable {
	TEXT-ALIGN: center; WIDTH: 99%; MARGIN-BOTTOM: 10px
}
.menu TABLE {
	TEXT-ALIGN: center; MARGIN: 0px auto; WIDTH: 100%
}
.menu {
	PADDING-BOTTOM: 3px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; VERTICAL-ALIGN: top; PADDING-TOP: 3px
}
.menu {
	TEXT-DECORATION: none
}
.submenu {
	PADDING-BOTTOM: 3px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; PADDING-TOP: 3px
}
.submenu {
	TEXT-DECORATION: none
}
.menu IMG {
	BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
.submenu IMG {
	BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
DIV.milonic {
	POSITION: absolute; TEXT-INDENT: -200em; WIDTH: 30px; VISIBILITY: hidden
}

Here is your menu_sub.js file with a small change:

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=200;
_menuOpenDelay=250;
_subOffsetTop=2;
_subOffsetLeft=-15;
_buildAllMenus=false;

with(menuStyle=new mm_style()){
offclass="menu";
onclass="menu";
fontfamily="trebuchet ms, tahoma, arial, sans-serif";
fontsize="12pt";
//fontsize="11pt";
fontweight="bold";
bordercolor="#ff0000";
borderstyle="solid";
borderwidth=1;
onborder="solid #ff0000 1px";
headerbgcolor="#000000";
itemwidth="100%"
headercolor="#ff9900";
offbgcolor="#000000";
offcolor="#ff9900";
onbgcolor="#ff9900";
oncolor="#000000";
pagebgcolor="";
pagecolor="";
separatorcolor="#ff0000";
separatorsize=0;
subimage="menu_arrow_orange.gif";
onsubimage="menu_arrow_black.gif";
subimagepadding=0;
subimageposition="center";
overfilter="Alpha(opacity=100);Shadow(color=#999999', Direction=135, Strength=6);";
} 

with(sub=new mm_style()){
offclass="submenu";
onclass="submenu";
align="left";
bordercolor="#ff0000";
borderstyle="solid";
borderwidth=1;
fontfamily="trebuchet ms, tahoma, arial, sans-serif";
fontsize="11pt";
//fontsize="10.5pt";
fontweight="bold";
headerbgcolor="#000000";
headercolor="#ff9900";
offbgcolor="#000000";
offcolor="#ff9900";
onbgcolor="#ff9900";
oncolor="#000000";
pagebgcolor="";
pagecolor="";
separatorcolor="#ff0000";
separatorsize=1;
subimage="menu_arrow_orange_right.gif";
onsubimage="menu_arrow_black_right.gif";
subimagepadding=0;
subimageposition="right";
overfilter="Alpha(opacity=100);Shadow(color=#999999', Direction=135, Strength=6)";
overfilter="GradientWipe(WipeStyle=1, size=1.00, motion='Forward', duration=0.4)"; 
//outfilter="Blinds(bands=1, direction='Up', duration=0.4)"; 
//overfilter="Blinds(bands=1, direction='Down', duration=0.5)";
}

with(pics=new mm_style()){
offclass="submenu";
onclass="submenu";
align="left";
bordercolor="#ff0000";
borderstyle="solid";
borderwidth=1;
fontfamily="trebuchet ms, tahoma, arial, sans-serif";
fontsize="10pt";
fontweight="bold";
headerbgcolor="#000000";
headercolor="#ff9900";
offbgcolor="#000000";
offcolor="#ff9900";
onbgcolor="#ff9900";
oncolor="#000000";
pagebgcolor="";
pagecolor="";
separatorcolor="#ff0000";
separatorsize=1;
subimage="menu_arrow_orange_right.gif";
onsubimage="menu_arrow_black_right.gif";
subimagepadding=0;
subimageposition="right";
overfilter="Alpha(opacity=100);Shadow(color=#999999', Direction=135, Strength=6)";
overfilter="GradientWipe(WipeStyle=1, size=1.00, motion='Forward', duration=0.4)"; 
}

with(milonic=new menuname("About")){
overflow="scroll";
style=sub;
aI("text=The Company;url=about_us.htm;");
aI("text=The Director;url=director.htm;");
aI("text=Assistant Directors;url=director_asst.htm;");
}

with(milonic=new menuname("Information")){
style=sub;
align="left";
aI("text=Frequently Asked Questions (F.A.Q);url=faq.htm;tooltip=Got a question about SNDC or this website?<br>Look here for answers to the most common questions.");
aI("text=Booking Info;url=booking.htm;");
aI("text=Membership & Rehearsal Info;url=membership.htm;tooltip=Information on Joining and Rehearsal times;tooltip=Join SNDC Today!");
aI("text=Contacts & Mailing List;url=contact.htm;tooltip=Want to send us an E-mail?<br>Join our Mailing List?<br>This is the place to do it!");
aI("text=Donate Today!;url=donations.htm;");
}

with(milonic=new menuname("Pictures")){
style=sub;
aI("pointer=default;showmenu=Read Me;text=Read Me");
aI("pointer=default;showmenu=Full;text=Full Performances;");
aI("pointer=default;showmenu=Festivals;text=Festivals, Etc.;");
aI("pointer=default;showmenu=Social;text=Social Events;");
aI("text=20th Anniversary Gala 2006;url=pic_gala_2006.htm;");
aI("text=Armenia Tour 2006;url=pic_armenia_2006.htm;");
aI("text=Armenia Tour 1995;url=pic_armenia.htm");
aI("text=Rehearsal Photos;url=pic_rehearsals.htm");
}

with(milonic=new menuname("Read Me")){
style=sub;
aI("pointer=default;onbgcolor=#000000;oncolor=#ff9900;fontsize=10pt;itemwidth=200px;align=left;text=*All pictures are the property of the Sayat Nova Dance Company of Boston. Pictures may not be used or reproduced without the expressed, written consent of the Sayat Nova Dance Company of Boston. For any media requests, please contact <a href='contact.htm'>the Webmaster</a>.<br>*All photographs by Viken Karaguesian unless otherwise noted.;type=html");
}

with(milonic=new menuname("Full")){
itemwidth=250;
style=pics;
aI("text=Portland, Maine, May 2010;url=pic_portland_2010.htm;");
aI("text=Mosesian Theater, Watertown, 2010;url=pic_arsenal_2010.htm;");
aI("text=Los Angeles/Glendale, 2009;url=pic_los_angeles_2009.htm;");
aI("text=Washington DC, 2008;url=pic_washington_2008.htm;");
aI("text=OUT OF DARKNESS<br>SNDC & Liz Lerman Dance Exchange;url=pic_lerman.htm;");
aI("text=Cutler Majestic Theater, Boston, 2006;url=pic_majestic_2006.htm;");
aI("text=Montreal, 2006;url=pic_montreal_2006.htm");
aI("text=Florida, 2005;url=pic_florida_2005.htm");
aI("text=Brookline, 2004;url=pic_brookline.htm");
aI("text=Montreal, Quebec, 2004;url=pic_montreal_2004.htm");
aI("text=Lodi, New Jersey, 2004;url=pic_newjersey_2004.htm");
aI("text=Waltham, MA, 2003;url=pic_waltham2003.htm");
aI("text=Clark University, 2001;url=pic_clark.htm");
aI("text=Boston University, 1999;url=pic_boston_univ.htm");
aI("text=Northeastern University, 1999;url=pic_northeastern.htm");
}

with(milonic=new menuname("Festivals")){
itemwidth=250;
style=pics;
aI("text=Lodi, New Jersey, 2008;url=pic_newjersey_2008.htm");
aI("text=Serbian/Armenian Collaboration;url=serb_arm_2007.htm");
aI("text=Armenian Night, 2006, Long Island, NY;url=pic_eisen_2006.htm");
aI("text=Nune Yessayan, 2005;url=pic_nune2005.htm");
aI("text=Peabody Int'l Festival, 2005;url=pic_peabody2005.htm");
aI("text=Peabody Int'l Festival, 2004;url=pic_peabody2004.htm");
aI("text=Peabody Int'l Festival, 2003;url=pic_peabody2003.htm");
aI("text=Nune Yessayan Tour, 2002;url=pic_nune2002.htm");
aI("text=Peabody Int'l Festival, 2001;url=pic_peabody2001.htm");
aI("text=Peabody Int'l Festival, 2000;url=pic_peabody2000.htm");
}

with(milonic=new menuname("Social")){
style=pics;
aI("text=New Year's Eve Dance, 2007/08;url=pic_new_year_2007.htm");
aI("text=Hovhannes Shahbazyan, 2006;url=pic_hovshah_2006.htm");
aI("text=Alumni Reunion, 2005;url=pic_reunion_2005.htm");
aI("text=Aram Asatryan, 2005;url=pic_aram2005.htm");
aI("text=Family Fun Day, 2005;url=pic_picnic2005.htm");
aI("text=Aram Asatryan, 2004;url=pic_aram2004.htm");
aI("text=Puzant, 2003;url=pic_puzant2003.htm");
aI("text=Family Fun Day, 2001;url=pic_picnic2001.htm");
aI("text=Aram Asatryan, 1999;url=pic_aram1999.htm");
aI("text=Harout Pamboukjian, 1999;url=pic_harout.htm");
//aI("text=Family Fun Day, 1999;url=pic_picnic1999.htm");
}

with(milonic=new menuname("Media")){
style=sub;
aI("text=Promotional Video;");
aI("text=Brochure;url=brochure.htm");
}

with(milonic=new menuname("Reviews")){
style=sub;
itemwidth=200;
aI("text=Article: \"Tradition Never Fades\" <img id='newwin' src='images/new_window.gif';url=javascript:NewWin=window.open('http://www.townonline.com/medfield/localRegional/view.bg?articleid=588482','NWin');window['NewWin'].focus();");
aI("text=SNDC's Role in the 2002 Olympics!;url=http://www.armenianreporteronline.com/old/09022002/ne-apo.htm;")
aI("text=News Article on 20th Anniversary;url=20th_anniv_article.htm");
aI("text=Article: \"Volunteerism...\" <img id='newwin' src='images/new_window.gif';url=javascript:NewWin=window.open('other_files/volunteerism_drag_09_18_05.pdf','NWin');window['NewWin'].focus();");
aI("text=Review, New Jersey, 2004;url=nj_review.htm");
aI("text=Article: Dance is Alive in Boston <img id='newwin' src='images/new_window.gif';url=javascript:NewWin=window.open('other_files/dance_is_alive.pdf','NWin');window['NewWin'].focus();");
}

with(milonic=new menuname("Awards")){
style=sub;
itemwidth=175;
aI("text=WSB Customer Choice Award, 2006;url=pic_wsb2006.htm;");
aI("text=State House Award;url=images/Proclamation.gif;");
aI("text=WSB Customer Choice Award;url=images/wsbaward_9th.gif;");
}

with(milonic=new menuname("Store")){
style=sub;
itemwidth=175;
aI("text=DVD's;url=dvd.htm;");
aI("text=T-Shirts & Apparel;url=apparel.htm;");
aI("text=More SNDC Items at CafePress.com <img id='newwin' src='images/new_window_current.gif';url=javascript:NewWin=window.open('http://www.cafepress.com/sndc','NWin');window['NewWin'].focus();");
}

drawMenus();

Once you have updated milonic_src.js, mmenudom.js and updated the sndc.css and menu_sub.js files we can then set about fixing any remaining issues.

Regards
Andy

[vikenk]

Hi Andy,

Thanks for the quick response! I quickly copied and pasted your code and it works just fine! It's going to take me some time to figure out what you changed in my style sheet, though. I'll have to do that when I get home from work tonight. I will say that I previously tried some of the changes you made to the menu table styling, but i hadn't gotten it to work. I must have not done it correctly. :>)

Thanks again.

[Andy]

Did you manage to get this finished in the end?

[vikenk]

Hello Andy,

Sorry, I have not been able to complete the upgrade. I have been too busy in other areas of my life to concentrate on that at this time. However, I know that the newer version of the menu "plays nice" with Lightbox v 2.04 (the popular photo viewer). The truth is that I'm not sure if it's the menu or the Lightbox script, but there was a combination of versions that were not compatible.

There is one thing that I did notice during the time I spent on it. When I implement your changes, the menu behaves much better but the last menu item (Guest Book) is smaller than the rest, which forces the text to be wrapped to two lines instead of one line like it currently is. The menu seems to have difficulty spacing things evenly. If I want the menu to span a specific width, it should be able to adjust the menu items to be evenly spaced based on the number of items I add or remove. For instance, using www.sayatnova.com as an example, I want the menu width to span the whole space above the content. Whether I have 3 menu items or 8 menu items, it should space the items evenly. The menu seems to have difficulty doing that. I am not a professional coder, though, so I'm not sure if the fault lies with me or not. In fact, I have noticed this behavior before and have posted about it. You can read an example below, although the links to screen shots, etc are no longer active:

viewtopic.php?f=10&t=8093

When I get a chance to implement it, I'll update this thread. Thanks!

[Ruth]

Hi,

I have been fiddling with this for a while, and finally found the solution for the itemwidth to spread out even if there are only 3. I tried everything I could think of in the css with no results so I just started changing things in the data file styles for the main menu. If you change your separatorcolor to #000000 and then set it at separatorsize=1, then the items spread out. I also found that to make it look right, you need to put an image into the items that don't have a submenu or subimage.This is what I finally got for your menuStyle which you use for the main menu, starting at the separator

Code: Select all

//separatorcolor="#ff0000";
//separatorsize=0;
separatorcolor="#000000";
separatorsize=1;
subimage="menu_arrow_orange.gif";
onsubimage="menu_arrow_black.gif";
subimagepadding="0px 0px 3px 0px";
subimageposition="center";
imagepadding="0px 0px 3px 0px";
overfilter="Alpha(opacity=100);Shadow(color=#999999', Direction=135, Strength=6);";

Then in your main menu, I put this [after making a transparent image the same size as the subimage arrows which I named blank.gif

Code: Select all

with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
position="relative";
orientation="horizontal";
margin=0;
menuwidth="100%";
itemwidth="100%";
aI("text=Home;image=blank.gif;imageposition=center;url=index.html;");
aI("pointer=default;showmenu=About;text=About...;");
aI("pointer=default;showmenu=Information;text=Information;");
aI("pointer=default;showmenu=Pictures;text=Pictures;");
aI("text=Calendar;image=blank.gif;imageposition=center;url=calendar.htm;");
aI("pointer=default;showmenu=Store;text=SNDC Stores;");
aI("text=Guest Book   ;image=blank.gif;imageposition=center;url=guest_book.htm;");
//aI("text=Site index;url=javascript:mm_siteIndex('top=0,left=0,height=768,width=1024','Milonic Site Index');"); // Use only when generating Site Map
}

drawMenus();

Hope that helps. I'm not sure why you need the separator to make the items spread out 100%, but you do. I blanked out 3 items to see what happened and those left spread out the full menu Hope this helps.

Ruth

PS: you'll note the non breaking line space in the Guest Book section. That was the only way I could get it to not wrap. Also, I forgot, you need to add decoration="none"; in the menuStyle, even though it is in the css, it seems it needs it in the style to not underline.

[wpatters1229]

How can I get Opera and Chrome to respond to a fontsize change? I have menu version 5.83 and setting the fontsize to 10px works just fine in IE and FF but in Opera and Chrome it is as if nothing affects the font size. I have a center menu that is wrapping because it needs to be a smaller font and nothing will change the size...but it sure does in the other browsers

[Ruth]

Hi,

There is a newer version 5.831. Also, in order to answer your question, I will need to see the page so I can look at your data file and any css.

Ruth

[wpatters1229]

Hi Ruth...will address the issue of upgrading but I do not see anything out there that speaks to the font size issue. What is funny is that I can increase the font size and see that change in Opera and Chrome but when I try to go below the 10px font size it will not change. It does on the other browsers. I feel it has something to do with the CSS for the site...but I removed all my calls to style sheets and it still acted the same way.

The site in question is www.fragilex.org I got into this because I was doing a whole re-do of the home page with some rotating images and found some width styles added to a div affected the milonic menu that was a sub div of the div with the width...found that to be strange. It caused the menu to not allow the items widths to work.

The draft page I am working on is at http://www.fragilex.org/html/rotate.htm That was the problem page. I am working on the js for that page but I am using another so as to not mess what I have gotten to work.

What engines do Opera and Chrome use? I always thought that FF was the most compliant with WC3

[Ruth]

Hi,

OK, I have Opera 10, GoogleChrome 5 something and I am not seeing that issue. It looks the same in IE7, FF3.6+ and the other two browsers. My resolution is 1152x864. So I'm unable to figure out what is wrong for you since I am not seeing the issue. I tried zooming larger in both Chrome and Opera and it still did not wrap. I am assuming you are talking about the top center 4 items? Can you screen shot this for me? Maybe if I can see what you see I can 'guess' at the issue since I am not seeing it.

Ruth