Question

I have the following fiddle: My Button Bar

My problem is a common one, though inline-block is not helping like I hoped. How do I make the anchor and the button the same size. The blue buttons need to be contained within the gray bar, they should have a small border, and be the same size, as you would totally expect from a button bar.

It only really has to work in firefox and chrome. We are not bothering with IE anymore (Chrome Frame).

The html looks like this:

<div class="buttons">
    <button class="inline-button" type="submit" name="action" value="Update"><span data-icon="icon-cog">icon</span>Save</button>
    <a href="#"><span data-icon="icon-cog">icon</span>Cancel</a>
</div>

The CSS I am using is as follows:

div.buttons a, div.buttons button[type=submit] {
  position: static;
  display: inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  outline: 0;
  vertical-align: baseline;
  height: 100%;
  font-family: PTSansBold;
  font-size: 12pt;
  text-align: left;
  background-color: #051DC3;
  color: white;
  padding: 4px;
  margin: 3px;
  width: 8em;
  border: none;
  text-decoration: none;
}

Thanks.

Answer 1

Demo

Hi now try this css This is Css3 Box-sizing : border-box

div.buttons a, div.buttons button[type="submit"]{
-moz-box-sizing:border-box;
    box-sizing:border-box;
        -webkit-box-sizing:border-box;
    vertical-align:top;
}

Demo

---

more about this box-sizing