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

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

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

Poster: nwilcox
Dated: Friday July 17 2009 - 15:25:46 BST

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:

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

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:

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

Re: openstyle=up is off by 1 pixel?

Poster: nwilcox
Dated: Monday July 20 2009 - 16:44:28 BST

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? :oops:

Thanks!

Re: openstyle=up is off by 1 pixel - bug or am I wrong?

Poster: Ruth
Dated: Monday July 20 2009 - 17:47:34 BST

Hi,

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

Ruth

Re: openstyle=up is off by 1 pixel - bug or am I wrong?

Poster: nwilcox
Dated: Monday July 20 2009 - 18:06:55 BST

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.

Re: openstyle=up is off by 1 pixel - bug or am I wrong?

Poster: Ruth
Dated: Monday July 20 2009 - 21:20:12 BST

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

Re: openstyle=up is off by 1 pixel - bug or am I wrong?

Poster: nwilcox
Dated: Monday July 20 2009 - 21:31:11 BST

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:

top="offset=-1px"

to get it adjusted correctly.

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

Thanks again!

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

Poster: nwilcox
Dated: Monday August 17 2009 - 13:49:03 BST

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

Thanks!

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

Poster: Ruth
Dated: Monday August 17 2009 - 23:36:04 BST

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

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

Poster: nwilcox
Dated: Wednesday August 19 2009 - 14:47:28 BST

Thanks Ruth!

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