Skip navigation
Currently Being Moderated

I want continuous, adjacent buttons in Vertical Navigation

Mar 18, 2010 7:15 AM

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.

 
Replies
  • Currently Being Moderated
    Mar 18, 2010 8:13 AM   in reply to brightbelt

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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points