CODEWITHSUNDEEP
javascripthtmlcssfirefox
Complexity
Complexity

Reputation: 5820

Adding padding to button pushes other buttons down in Firefox and IE

I'm trying to style a simple button to match the look and feel of a native Windows button.

This does al work in Chrome, but when running in FireFox or Edge (IE), there's some strange behaviour:

See the following css:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

#OfficeUI {
  font-size: 11px;
  font-family: "Segoe UI", "Open Sans";
}

.btn {
  background-color: #E1E1E1;
  border: 1px solid #ADADAD;
  color: #444;
  font-family: "Segoe UI", "Open Sans";
  font-size: 11px;
  height: 22px;
  min-width: 74px;
  padding: 0 1px 1px 0;
}
.btn:focus {
  outline: none;
}

.btn:hover {
  background-color: #E5F1FB;
  border-color: #0078D7;
  border-width: 1px;
}

.btn:active {
  background-color: #CCE4F7;
  padding: 0;
}

.btn-default {
  border-color: #0078D7;
  border-width: 2px;
}

and the following Html:

<body>
  <div id="OfficeUI">
      <button type="button" class="btn btn-default">
        Ok
      </button>

      <button type="button" class="btn">
        Ok
      </button>
  </div>
</body>

So, the button is normally styled, and when you press down on a button the test shifts 1px down and 1px to the right, to have a kind of pressed effect.

However, when executed in FireFox, the second button is shifted one pixel down, how is that possible?

I've attached a fiddle but fiddle cannot reproduce the problem in Firefox, nor in Edge.

Upvotes: 1

Views: 142

Answers (1)

Pimmol
Pimmol

Reputation: 1871

Seems like a problem with the vertical alignment of the buttons. The browser displays the button as 'inline-block'. Adding 'vertical-align: top;' fixes the problem.

.btn {
      vertical-align: top;
      background-color: #E1E1E1;
      border: 1px solid #ADADAD;
      color: #444;
      font-family: "Segoe UI", "Open Sans";
      font-size: 11px;
      height: 22px;
      min-width: 74px;
      padding: 0 1px 1px 0;
}

https://jsfiddle.net/7gdfr2qk/7/

Upvotes: 1

Related Questions