2 Replies Latest reply on Mar 19, 2010 3:56 AM by brightbelt

    I want continuous, adjacent buttons in Vertical Navigation

    brightbelt Level 1

      Hi, I'm on CS4 here on an iMac. My vertical navigation is done pretty much, but I'd like the buttons to be vertically adjacent and continuous.

       

      I am able to do this for Firefox and Safari by changing the Height setting to 24px, which perplexes me because my button images are actually 35px high. 

      But that *seems* to work in Safari and Firefox.  But it doesn't fly in IE 6 - it cuts into the actual button images.

       

      First off, I'm not sure what the 'height' property here refers to and how to set it so that the buttons are vertically adjacent and display like this in all browsers.

       

      Here's my site - I can only show the home page with my new setting because I don't want the whole site changed until it all works correctly.

       

      http://www.westwindentertainment.com

       

      I really appreciate any help or pointers on this. I did Google this quite a bit and searched the forums and found no clues by myself.

       

      Many Thanks, Frank B.

        • 1. Re: I want continuous, adjacent buttons in Vertical Navigation
          osgood_ Level 8

          Amend your css which controls the nav to EXACTLY the following (see below). I've added in a #navcontainer li selector as an addition to zero out the margin and padding.

           

           

          #navcontainer ul {
          padding:0px;
          width: 120px;
          margin: 0;
          color: Black;
          list-style-type: none;
          float: left;
          font-family: arial, helvetica, sans-serif;
          font-size:12px;
          text-align:center;
          }


          #navcontainer li {
          margin: 0;
          padding: 0;
          }

           

          #navcontainer ul li a {
          background-image:url(NavPx.gif);
          background-repeat:no-repeat;
          color: #EEE;
          text-decoration: none;
          display: block;
          font-weight:bold;
          height: 34px;
          line-height: 34px;
          }

           

          #navcontainer ul li a:hover {
          background-image:url(NavOv.gif);
          background-repeat:no-repeat;
          color: #030;
          }

          • 2. Re: I want continuous, adjacent buttons in Vertical Navigation
            brightbelt Level 1

            Many, Many Thanks Osgood. Sorry I'm slow replying - I got diverted.

             

            This helps out a LOT. Thanks again, Frank B.