0 Replies Latest reply: Oct 9, 2008 1:20 PM by Petrula RSS

    Spry Horizontal Menu straddles header

    Petrula Community Member
      Problem: Spry Horizontal Menu straddles header

      I created a new page using
      "1 column elastic, centered, header and footer"
      I add a Spry Horizontal Menu within the "header" div.
      The menu does not display entirely within the grey header area.
      The menu straddles half in the header and half below the header.
      I believe this is because of the float i.e.
      "ul.MenuBarHorizontal li" has "float: left;".
      How do I make the menu stay entirely within the grey header content area?
      Thanks ahead of time.
      ************************
      <div id="header">
      <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">Home</a> </li>
      <li><a href="#">People</a></li>
      </ul>
      </div>

      .oneColElsCtrHdr #header {
      background: #DDDDDD;
      padding: 10px;
      }

      ul.MenuBarHorizontal li
      {
      margin: 0;
      padding: 0;
      list-style-type: none;
      font-size: 100%;
      position: relative;
      text-align: left;
      cursor: pointer;
      width: auto;
      float: left;
      }