1 - if I put width:185px in anywhere (we want all the buttons to be the same width) then the padding dissappears.
2 - when I hover over a button the border doesn’t appear all the way around.
3 - it would be nice if the words weren’t hard up against the left hand side of the button, but whenever I indent something it moves the button not the text.
I put the border in both div.allMMbuttons a and div.allMMbuttons a:hover. In that way the size of the button doesn’t change when you hover it. That size-changing can be very anoying for the user
I put the padding (padding-left) for the words in the button in div.greyMMbuttons a and div.blueMMbuttons a
The last line is added to show the buttons one one line (I don’t know if that what you want, but i put in just in case)
I would like the buttons displayed one under the other so as instructed I removed your last line of code.
The only trouble now is that the two blues lines are merging into one (the space between the grey one and the top of the two blue ones is fine). Is there a way to fix that ?
Subject: CSS buttons - padding and width conflict ?
The standard box model works like this:
width: describes the “content” box dimension
padding: lies outside the content box
border: lies outside of the padding
margin: lies outside of the border
If you set a width, make sure that you allow for the padding, border and margin widths as well. And remember that if you add a border to something, you are changing the size of the whole deal, so you need to use a border for all of the link states, not just :HOVER. Just use the same colour for the border as you do for the link “box” if you don’t want it to look like there’s a border.
