How to make CSS buttons the same size

Get Started
1

I am trying to design a vertical nav menu using CSS to create a button effect using the border attribute.

I have the buttons working but they are all different sizes, based upon the number of characters in the label. I have tried padding using &nbsp but this doesn’t give an exact size, presumably due to the different letter sizes in the proportional font.

Is there a way of forcing the buttons to all be the same size, regardless of the text label?

Thanks

2

yep.

Width: 2em

Basically, if you want them the same size, you have to give the same width.

3

First, in your html put the items in a list, and put the list inside a division (for this example I’ll call the div “navigation”)


<div id="navigation">
<ul><li> <a href="#"> your item</a></li>
<li><a href="#">second item</a></li></ul>
</div>

Then style the list in your css to display as a block, the colors, fonts, and so on:

#navigation {
width: 180px;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
font-weigth: bold;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #C3DBFB;
}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #033CC2;
border-right: 1px solid #033CC2;
background-color: #5386F2;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #033CC2;
color: #FFFFFF;
}

4

Molona was faster than me, and I guess her solution was so much simpler.

5

Many thanks for the quick responses.

It was the ‘display: block’ which I needed.

So much to learn. :0(

6

Going on from there, the buttons only work when the cursor is hovering over the text, rather than anywhere within the width of the button. Is there a command which will resolve that?

7

here is one workaround in this part of the style sheet. To make the links active for the full width of the DIV, I made them display: block;. This works for everything but IE/Windows. If you give the block an explicit width of 100%, then IE/Windows plays along. But doing this creates problems with IE5/Mac and Netscape/Mozilla. So I used the child selector“>” to redefine the width to auto. Since IE/Windows doesn’t understand child selectors, it ignores the rule. IE5/Mac, Opera and Netscape/Mozilla follow the rule, and everyone is happy.

so, the hack would be:


html>body #navigation li a {
		width: auto;
		}
8

Thanks for that. I must be missing something as I can’t get it to work but I’ll keep playing around with it.

Does the bit ‘#navigation li a’ have to match the exact tag path I see when my cursor is in the link list?

9

sorry, that goes in the css code. Just copy and paste.

10

My bad, I don’t know what I’m thinking. You also have to add another line of code to navigation li, to make it 100% width.

So, the complete css will look like this:

#navigation {
width: 180px;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
font-weigth: bold;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #C3DBFB;
}
#navigation li a:link, #navigation li a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 12px solid #033CC2;
border-right: 1px solid #033CC2;
background-color: #5386F2;
color: #FFFFFF;
text-decoration: none;
width: 100%;
}
#navigation li a:hover {
background-color: #033CC2;
color: #FFFFFF;
}

html>body #navigation li a {
width: auto;
}

11

Works perfectly now.

Many thanks for the help.

12

You’re welcome. :slight_smile:

13