Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to solve this layout bug?

How to solve this layout bug?

Problem

I have a layout bug when trying to render two lines in a menu as can be seen from the lowest element:

The HTML that does this is

  • OpportunityOpportunity
    • How to joinHow to join
      • Why is MLM the Answer
      • Why are we right now right here for youWhy are we right now right here for you
        • Marketing plan
        • Volume bonus
        • Growth and Incentives
    • I also have a stylesheet menu.css that looks like this

      #multi-ddm {
          list-style:none;
          padding:20px 0 0 0;
          margin:0;
          float:right;
      }
      
      #multi-ddm li {
          float:left;
          margin:0 2px 0 2px;
          font-size:16px;
      }
      
      #multi-ddm li li {
          float: none;
      }
      
      #multi-ddm li li a {
          float: none;
      }
      
      #multi-ddm li a {
          display: block;
          padding:0 5px 0 0;
          color:#a9cfdd;
          cursor:pointer;
          float:left;
      }
      
      #multi-ddm li a span.level1 {
          float:left;
          padding:7px 6px 7px 11px;
      }
      
      #multi-ddm li a img.level2 {
          position: absolute;
          margin-top: -14px;
          margin-left: 145px;
      }
      
      #multi-ddm li.first a img.level2 {
          position: absolute;
          margin-top: -13px;
          margin-left: 145px;
      }
      
      #multi-ddm li.level1.active a,
      #multi-ddm li.level1 a:hover {
          text-decoration:none;
          color:#f6f6f6;
          background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.png) no-repeat 100% -32px;
      }
      
      #multi-ddm li.active a span.level1,
      #multi-ddm li a:hover span.level1 {
          text-decoration:none;
          color:#f6f6f6;
          background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active.png) no-repeat;
      }
      
      #multi-ddm li.top a.parent-hover
      {
          text-decoration:none;
          color:#f6f6f6;
          background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active2.png) no-repeat 100% -32px;
      }
      
      #multi-ddm li.top a.parent-hover span.level1 {
          text-decoration:none;
          color:#f6f6f6;
          background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active2.png) no-repeat;
      }
      
      #multi-ddm li a .cufon {
          float:left;
          margin:0 !important;
      }
      
      #multi-ddm li a img {
          display: none;
      }
      
      #multi-ddm li a span.level2 {
          display:none;
      }
      
      #multi-ddm li ul a {
          width: 147px;
          padding: 7px 10px 7px 18px !important;
          font-size: 12px;
          border-bottom: 1px #02699f solid;
          border-top: 1px #14a2df solid;
          background:#148bb4;
          text-transform:none !important;
      }
      
      #multi-ddm ul li.level2 a {
          background:#148bb4 !important;
          color:#f6f6f6;
      }
      
      #multi-ddm ul li.level2 a:hover {
          color:#aae7f9 !important;
      }
      
      #multi-ddm li ul a img {
          display:block !important;
      }
      
      #multi-ddm li ul a span.level1 {
          display:none !important;
      }
      
      #multi-ddm li ul a span.level2 {
          display:block !important;
      }
      
      #multi-ddm li ul li ul a {
          width: 147px;
          padding: 7px 10px 7px 18px !important;
          font-size: 12px;
          border-bottom: 1px #02699f solid;
          border-top: 1px #14a2df solid;
          background:#148bb4;
          text-transform:none !important;
      }
      
      #multi-ddm li ul li ul {
          margin-left:168px !important;
          margin-top:-31px !important;
      }
      
      *:first-child + html #multi-ddm li ul li ul,
      *:first-child + html #multi-ddm li ul li.first ul,
      *:first-child + html #multi-ddm li ul li.last ul {
          margin-left:168px !important;
          margin-top:-34px !important;
      }
      
      #multi-ddm ul li.first a {
          background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat !important;
          border-top:none;
      }
      
      #multi-ddm ul li.last a {
          background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat 0 -31px !important;
          border-top: 1px #14a2df solid;
          border-bottom:none;
      }
      
      #multi-ddm ul li.last ul li a {
          background:#148bb4 !important;
          border-bottom: 1px #02699f solid;
      }
      
      #multi-ddm ul li.last ul li.first a {
          background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat !important;
          border-top: none;
          border-bottom: 1px #02699f solid;
          margin-top:1px;
      }
      
      #multi-ddm ul li.last ul li.last a {
          background:url(http://bnano-www.appspot.com/welcome/static/images/btn-active3.png) no-repeat 0 -31px !important;
          border-bottom: none;
          border-top: 1px #14a2df solid;
      }
      
      #multi-ddm li ul {
          display: none;
          list-style: none;
          position: absolute;
          margin-top: 29px;
          margin-left: -2px;
          z-index: 10000;
          padding: 0;
      }
      
      *:first-child + html #multi-ddm li ul {
          margin-left:-100% !important;
      }
      
      *:first-child + html #multi-ddm li ul li {
          margin-left:0 !important;
      }
      
      *:first-child + html #multi-ddm ul li.top.level2.parent {
          margin-bottom: -3px;
      }
      

      Can you tell me what I need to do to resolve this layout bug? Thank you

      Problem courtesy of: Dj Dac

      Solution

      Not sure if I'm understanding this correctly, but I think it's because the button backgrounds are images, and therefore can't stretch to fit the text. There are better ways of doing what you're after, including modern CSS3 techniques.

      Also, while you're at it, please consider reviewing your CSS - it looks as if it needs a good deal of optimization.

      Solution courtesy of: egasimus

      Discussion

      View additional discussion.



      This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

      Share the post

      How to solve this layout bug?

      ×

      Subscribe to Css3 Recipes - The Solution To All Your Style Problems

      Get updates delivered right to your inbox!

      Thank you for your subscription

      ×