margin issue in chrome

Question

I am using megamenu to create a three column menu that generates flyouts to the right when each column gets past 10 items. the flyout "leaf" classes are added dynamically by javascript.

the second column starts at this li #10 as there are 10 to each column

.leaf-10 {
  margin-left: 251px !important;
  margin-top: -320px !important;
}

I position it left of the first column and position the margin-top.

the problem only happens in chrome (IE9 and Firefox are fine).

the link is http://net-neutrality.freeenergymedia.com/

u=anonim p=01477410

html looks like this

 <div class="content">
      <ul id="megamenu-primary-links" class="megamenu-menu horizontal megamenu-skin-nice"><li id="megamenu-mlid-1510" class="megamenu-parent megamenu-parent-0 odd half-1 leaf-0 first first"><h2 class="megamenu-parent-title"><a href="/about" class=" menu-1510">About Internet Society</a></h2></li>
<li id="megamenu-mlid-394" class="megamenu-parent megamenu-parent-1 even half-1 leaf-1 active active-trail"><h2 class="megamenu-parent-title"><a href="/message-topics" class=" active active-trail menu-394 active">Message Topics</a></h2><ul class="megamenu-bin megamenu-slots-columnar"><li id="megamenu-mlid-1512" class="megamenu-slot megamenu-slot-0 odd half-1 leaf-0 first first"><h3 class="megamenu-slot-title"><a href="/node/222" class=" menu-1512">DNS Blocking/Filtering</a></h3></li>
<li id="megamenu-mlid-1494" class="megamenu-slot megamenu-slot-1 even half-1 leaf-1"><h3 class="megamenu-slot-title"><a href="/message-topics/human-rights" class=" menu-1494">Human Rights</a></h3></li>
<li id="megamenu-mlid-1507" class="megamenu-slot megamenu-slot-2 odd half-1 leaf-2"><h3 class="megamenu-slot-title"><a href="/message-topic/ipv6" class=" menu-1507">IPv6</a></h3></li>
<li id="megamenu-mlid-1508" class="megamenu-slot megamenu-slot-3 even half-1 leaf-3"><h3 class="megamenu-slot-title"><a href="/message-topic/intellectual-property-rights" class=" menu-1508">Intellectual Property Rights</a></h3></li>
<li id="megamenu-mlid-688" class="megamenu-slot megamenu-slot-4 odd half-1 leaf-4"><h3 class="megamenu-slot-title"><a href="/message-topic/internet-access" class=" menu-688">Internet Access</a></h3></li>
<li id="megamenu-mlid-1521" class="megamenu-slot megamenu-slot-5 even half-1 leaf-5"><h3 class="megamenu-slot-title"><a href="/message-topic/test-topic-3" class=" menu-1521">Net Neutrality 1</a></h3></li>
<li id="megamenu-mlid-689" class="megamenu-slot megamenu-slot-6 odd half-2 leaf-6"><h3 class="megamenu-slot-title"><a href="/message-topic/net-neutrality" class=" menu-689">Net Neutrality</a></h3></li>
<li id="megamenu-mlid-1520" class="megamenu-slot megamenu-slot-7 even half-2 leaf-7"><h3 class="megamenu-slot-title"><a href="/message-topic/url-path-settings" class=" menu-1520">Privacy 1</a></h3></li>
<li id="megamenu-mlid-690" class="megamenu-slot megamenu-slot-8 odd half-2 leaf-8"><h3 class="megamenu-slot-title"><a href="/message-topic/security" class=" menu-690">Security</a></h3></li>
<li id="megamenu-mlid-1519" class="megamenu-slot megamenu-slot-9 even half-2 leaf-9"><h3 class="megamenu-slot-title"><a href="/message-topic/security-1" class=" menu-1519">Security1</a></h3></li>
<li id="megamenu-mlid-1526" class="megamenu-slot megamenu-slot-10 odd half-2 leaf-10 last last"><h3 class="megamenu-slot-title"><a href="/node/245" class=" menu-1526">test menu column 2</a></h3></li>
</ul></li>
<li id="megamenu-mlid-392" class="megamenu-parent megamenu-parent-2 odd half-2 leaf-2"><h2 class="megamenu-parent-title"><a href="/resources" class=" menu-392">Resources</a></h2></li>
<li id="megamenu-mlid-893" class="megamenu-parent megamenu-parent-3 even half-2 leaf-3 last last"><h2 class="megamenu-parent-title"><a href="/contact" class=" menu-893">Support</a></h2></li>
</ul>    </div>

"this is where the problem happens, only in (chrome IE9 and Firefox) are fine" - can you please explain the problem. I can see the second column being generated for the 11th and 12th menu items. — neo108, Feb 28 '12 at 01:24
How did you fix the problem, in detail? Write it as an answer instead of overwriting your entire question. — Peter O., Mar 01 '12 at 04:39
This comment thread is confusing... Are you still looking for a solution? — Tamara Wijsman, Mar 05 '12 at 00:27
@alex_b: You should post an answer to your question. What problem were you trying to solve and is the solution you found not what you originally intended? It could still be useful for the wider Internet if your original question was solved. — Tim Visher, Mar 05 '12 at 15:45

score 0 · Accepted Answer · answered Mar 07 '12 at 01:23

i added this code to check what row the first list item in the flyout menu will be then add a margin to the top.

if($(".megamenu-bin li").hasClass('leaf-20')){
   k=36;
   //Set the width 
   $(".megamenu-bin").addClass('mega-width-three')

   for(i=1;i<=9;i++){
     $(".megamenu-bin li.leaf-2"+i).css('top',k+'px') ; 
     k=k+30;
   }

}else{

if($(".megamenu-bin li").hasClass('leaf-10')){
       k=36;
    //Set the width 
   $(".megamenu-bin ").addClass('mega-width-two')

    for(i=1;i<=9;i++){

     $(".megamenu-bin li.leaf-1"+i).css('top',k+'px') ; 
     k=k+30;
   }
}else{

   $(".megamenu-bin").addClass('mega-width-single')


}


}

margin issue in chrome

1 Answers1