openstyle=up off a 1 pixel - bug or am I wrong? [workaround]

[nwilcox]

Hello everyone,

Got a weird issue.... http://clients1.serverside.net/ada/testlanding.aspx

The openstyle=up is working great except that the menu is popping 1 pixel off where it should be - look at forums. Then look at blogs (that was done using an offset)

menu call

Code: Select all

<script language="javascript" type="text/javascript">
						with (milonic = new menuname("FooterInteriorLeft")) {
							style = menuStyle;
							alwaysvisible = 1;							
							orientation = "horizontal";
							position = "relative";
							aI("image=images/btn_i_forums.gif;overimage=images/btn_i_forums_o.gif;title=FORUMS;status=FORUMS;showmenu=MenuMegaIForums;");
							aI("type=header;itemwidth=10;text=' '");
							aI("image=images/btn_i_blogs.gif;overimage=images/btn_i_blogs_o.gif;title=BLOGS;status=BLOGS;showmenu=MenuMegaIBlogs;");
							aI("type=header;itemwidth=10;text=' '");
							aI("image=images/btn_i_doccollab.gif;overimage=images/btn_i_doccollab_o.gif;title=DOCUMENT COLLABORATION;status=DOCUMENT COLLABORATION;showmenu=MenuMegaIDocCollab;");
							aI("type=header;itemwidth=10;text=' '");
							aI("image=images/btn_i_surveys.gif;overimage=images/btn_i_surveys_o.gif;title=SURVEYS;status=SURVEYS;showmenu=MenuMegaISurveys;");
						}
						drawMenus();
					</script>

jscode

Code: Select all

with(menuStyleMegaMenuIForums=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="12px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="transparent";
offcolor="transparent";
onbgcolor="transparent";
oncolor="transparent";
outfilter="";
overfilter="";
padding=0;
pagebgcolor="transparent";
pagecolor="transparent";
separatorcolor="#999999";
separatorsize=0;
subimage="";
subimagepadding=0;
menubgimage="images/bg_megamenu_i_forums.png";
}

//Forums
bodyHeader = "<div class=\'mega_bottom_green\'>";
bodyHeader += "<table cellpadding\"0\" cellspacing=\"0\">";
bodyCopy = "<tr>";
bodyCopy += "<td valign=\"top\" width=\"50%\">";
bodyCopy += "<dl>";
bodyCopy += "<dt class=\"large\">Featured Blog:</dt>";
bodyCopy += "<dd>";
bodyCopy += "<h1><a href=\"\">RDs Weigh In</a></h1>";
bodyCopy += "<h3>Most Recent Post:</h3>";
bodyCopy += "<h2><a href=\"\">ADA at NASDAQ Opening Bell</a></h2>";
bodyCopy += "<p>In honor of National Nutrition Month, ADA President Martin M. Yadrick rang the opening bell on NASDAQ this morning. He was joined by a number of ADA members who live in the New York area. To view the full event video, go to the <a href=\"\">NASDAQ</a> Web site...</p>";
bodyCopy += "</dd>";
bodyCopy += "</dl></td>";
bodyCopy += "<td valign=\"top\" width=\"25%\">";
bodyCopy += "<dl>";
bodyCopy += "<dt>Other Blogs:</dt>";
bodyCopy += "<dd>";
bodyCopy += "<ul>";
bodyCopy += "<li><a href=\"\">The Benefits of Breakfast</a></li>";
bodyCopy += "<li><a href=\"\">National African American</a></li>";
bodyCopy += "<li><a href=\"\">History Month - Eliminating</a></li>";
bodyCopy += "<li><a href=\"\">Health Disparities</a></li>";
bodyCopy += "<li><a href=\"\">Shopping Smarter in 2009</a></li>";
bodyCopy += "</ul>";
bodyCopy += "</td>";
bodyCopy += "<td class=\"last\" valign=\"top\" width=\"25%\">";
bodyCopy += "<dl>";
bodyCopy += "<dt>Additional Posts:</dt>";
bodyCopy += "<dd>";
bodyCopy += "<ul>";
bodyCopy += "<li><a href=\"\">Blog Title Appears Here</a></li>";
bodyCopy += "<li><a href=\"\">Ut Enim Adminim Veniam</a></li>";
bodyCopy += "<li><a href=\"\">Consectetur Adipisicing Elit</a></li>";
bodyCopy += "<li><a href=\"\">Lorem Ipsum Dolor Sitamet</a></li>";
bodyCopy += "<li><a href=\"\">Blog Title Appears Here</a></li>";
bodyCopy += "<li><a href=\"\">Blog Title Appears Here</a></li>";
bodyCopy += "<li><a href=\"\">Blog Title Appears Here</a></li>";
bodyCopy += "<li><a href=\"\">Blog Title Appears Here</a></li>";
bodyCopy += "<li><a href=\"\">Blog Title Appears Here</a></li>";
bodyCopy += "<li><a href=\"\">Blog Title Appears Here</a></li>";
bodyCopy += "</ul>";
bodyCopy += "</dd>";
bodyCopy += "</td>";
bodyCopy += "</tr>";
bodyCopy += "<tr class=\"footerNav\">";
bodyCopy += "<td><a href=\"\"><img src=\"/ada/images/btn_viewpost.gif\" width=\"81\" height=\"20\" alt=\"VIEW POST\" title=\"VIEW POST\"/></a></td>";
bodyCopy += "<td><a href=\"\"><img src=\"/ada/images/btn_viewpost.gif\" width=\"81\" height=\"20\" alt=\"VIEW POST\" title=\"VIEW POST\"/></a></td>";
bodyCopy += "<td class=\"last\"><a href=\"\"><img src=\"/ada/images/btn_viewpost.gif\" width=\"81\" height=\"20\" alt=\"VIEW POST\" title=\"VIEW POST\"/></a></td>";
bodyCopy += "</tr>";
bodyFooter = "</table>";
bodyFooter += "</div>";


with(milonic=new menuname("MenuMegaIForums")){
style=menuStyleMegaMenuIForums;
itemwidth="682px";
itemheight="223px";
menuheight="223px";
left="offset=-14px";
openstyle="up";
aI("rawcss=padding:14px 9px 17px 5px;type=form;text=`" + bodyHeader + bodyCopy + bodyFooter + "`;");
}

css

Code: Select all

.mega_bottom_green {
	color: #FFF;
	font-size: 11px;
	height: 192px;
	overflow: hidden;	
	width: 668px;
	background-color: blue;
}

	.mega_bottom_green table {				
		height: 192px;
		width: 668px;
	}
		
		.mega_bottom_green table tr td {
			background-color: none;			
			border-right: 1px solid #c7dc71;				
			font-size: 11px;
			height: 168px;
			overflow: hidden;
			padding: 0 15px;
			veritcal-align: top;						
		}

			.mega_bottom_green table tr td.last {
				border: 0;
				margin-right: 1px;
			}

			.mega_bottom_green table tr.footerNav td {
				background-color: green;
				height: 20px;
				margin-bottom: 4px;
			}

				.mega_bottom_green dl {
					margin: 0;
					padding: 0;
				}
			
					.mega_bottom_green dl dt {
						color: #000;			
						margin: 0;
						padding: 0 0 10px 0;	
					}

					.mega_bottom_green dl dt.large {
						color: #000;
						font-size: 12px;			
						margin: 0;
						padding: 0 0 5px 0;	
					}
			
					.mega_bottom_green dl dd {
						margin: 0;
						padding: 0;
					}
						
						/* content styles */
						.mega_bottom_green dl dd h1 {
							font-size: 28px;
							font-weight: normal;
							line-height: 28px;
							margin: 0;
							padding: 0 0 8px 0; 
						}

							.mega_bottom_green dl dd h1 a {
								color: #FFF;
								text-decoration: none;
							}
	
								.mega_bottom_green dl dd h1 a:hover, .mega_bottom_green dl h1 a:active {
										text-decoration: underline;
								}
						
						.mega_bottom_green dl dd h2 {	
							font-size: 13px;
							font-weight: normal;
							margin: 0;
							padding: 8px 0 4px 0;
						}
							.mega_bottom_green dl dd h2 a {
								color: #84005c;								
								text-decoration: none;
							}

								.mega_bottom_green dl dd h2 a:hover, .mega_bottom_green dl dd h2 a:active {
										text-decoration: underline;
								}

						.mega_bottom_green dl dd h3 {	
							color: #e2f895;
							font-weight: normal;							
							line-height: 13px;
							margin: 0;
						}

						.mega_bottom_green dl dd p {
							line-height: 13px;
							margin-top: 0;
						}

							.mega_bottom_green dl dd p a {
								color: #FFF;
								text-decoration: underline;
							}

						/* used for generating lists in the mega menus */
						.mega_bottom_green dl dd ul {
							font-size: 11px;
							list-style: none;
							margin: 0;
							padding: 0;
						}			
			
						.mega_bottom_green dl dd ul li {
							margin: 0;
							padding: 0 0 4px 0;
						}
			
							.mega_bottom_green dl dd ul li a {
								color: #FFF;
								line-height: 12px;
								text-decoration: none;
							}
			
								.mega_bottom_green dl dd ul li a:hover, .mega_bottom_green dl dd ul li a:active {
									color: #FFF;
									text-decoration: underline;
								}

[nwilcox]

This issue appears cross browser cross platform. Is this a bug in the openstyle method or am I doing something wrong? To get around this, if I set an top offset of -1px it works.

Am I totally missing something obvious here?

Thanks!

[Ruth]

Hi,

Sorry, I should have posted back. I am working on it, I'm just slow.

Ruth

[nwilcox]

Hi Ruth

Thanks for the update. I just want to make sure I'm not going crazy on this issue and it is something that I am doing wrong.

[Ruth]

Hi,

No, you are not doing something wrong Never admit to anything! I can see what it is doing, but I don't know why. It's as if the submenu is reading the border area of the div and matching with that rather than with the main menu. I don't know if that's something programming can fix, but at least the offset solves the issue. It only happens with the openstyle up. I 'reversed' your images and had it open down and that problem didn't occur, just so you know I am reporting it to Milonic, but as I said it may not be fixable, or rather it may take so much programming that it isn't worth it since there is the offset property which let's it be fixed.

Ruth

[nwilcox]

well I feel better.

If you are able to reproduce the issue, I know it isn't me haha!

For now I'll just use the workaround for

Code: Select all

top="offset=-1px" 

to get it adjusted correctly.

Please let me know if if the Team gets back with you on it.

Thanks again!

[nwilcox]

Ruth? Did you hear a response on this from Milonic? I'd like to see if this is indeed a bug.

Thanks!

[Ruth]

Hi,

Sorry, yes, it is a bug, but they did say that given there are options built in to fix it, i.e. offsets, and the development of the new version plus fixing any bugs that don't have built in fixes, this wouldn't be something they could get to any time soon.

Ruth

[nwilcox]

Thanks Ruth!

I'll let it ride then as we do have a fix for it.