a question about CSS buttons?

Question

I used buttons in the navagation container, which I saved from the Internet. There's one problem, though. The last button is cut off and words aren't ligned up correctly. Do I have to change the margins of the navcontainer, or is there something else? I tried many things. Please help.

Also...I want to have spaces between the buttons.

Answer 1

There's several classic examples at www.alistapart.com and one in CSS Mastery (Andy Budd et. al.)
I use:
ul#navigate { clear: left; font-size: .9em;
font-family: Tahoma,Verdana,Arial,sans-serif;
list-style-type: none; font-weight: bold;
margin: 10px 0 0 20px; padding: 0; }
ul#navigate li { float: left; margin: 0 0 0 5px; }
ul#navigate li a { background-color: #fbfbfb;
background-image: url("img1.gif");
background-position: center center;
background-repeat: repeat-x; color: #000;
border: 1px outset #e1f6f6; display: block;
line-height: 16px; margin-left: 0; margin-right: 0;
width: 100px; }
ul#navigate li a:hover { background-image: url("img2.gif"); }
ul#navigate li a#current, ul#navigate li a#current:hover {
background-image: url("img3.gif"); }

Answer 2

Alot of times these navcontainers have specified widths with overflow: hidden .. this means that if the content goes past the width of the container, it will be invisible.

Try increasing the width of the container.

One trick I use is to set a temporary background color on the container, to see where it's ended. If it ends where the content is cut off, you know what the problem is.

If I could see the webpage I could tell you right away what it is.