Papermate
Papermate

Reputation: 99

Input has different Widths in FireFox and Chrome

I am trying to figure out why the widths in FireFox and Chrome differ by so much. It's causing a problem with my Modal in my views.

Chrome:

enter image description here

FireFox:

enter image description here

So as you can see from the photos the width of the input on chrome is what I want it to be. However, on Firefox the width is 60 pixels greater than what is in Chrome. I read around and I thought my issue was with box-sizing so I set my input element to have box-sizing: border-box; but I don't think that box-sizing is causing a problem because it changed nothing. Below is my HTML and CSS.

HTML:

<div class="editModal">
<header>Edit</header>
<hr>
<form class="editForm">
  <ul>
    <li>
      <div>Title</div>
      <div class="editFormText">
        <input type="text" placeholder="Title" size="20">
      </div>
    </li>
    <br>

    <li>
      <div>URL</div>
      <div class="editFormText">
        <input type="text" placeholder="URL" size="20">
      </div>
    </li>
    <br>

    <li>
      <div>Description</div>
      <div class="editFormText">
        <input type="text" placeholder="Describe your Bookmarx!" size="20">
      </div>
    </li>
    <br>

    <li>
      <div>Keywords</div>
      <div class="editFormText">
        <input type="text" placeholder="Ex: face, book, fb, ..." size="20">
      </div>
    </li>
  </ul>
  <hr>
  <!--  -->
  <footer>
    <button>Cancel</button>
    <input type="submit" value="Save">
  </footer>
</form>

CSS:

.editModal {
  width: 320px; /* 300 + 10 + 10 + 1 + 1*/
  position: absolute;
  border: 1px solid black;
  border-radius: 5px;
  background-color: white;
  z-index: 2;  /* Lays it on top of <header> */
}

.editModal header {
  margin-top: 10px;
  margin-left: 5px;
}

.editForm {
  margin-bottom: 8px;
}

.editForm ul li {
  position: relative;
}

.editFormText {
  position: absolute;
  right: 5px;
  top: -2px;
  display: inline;
}

.editFormText input {
  box-sizing: border-box;
}

Upvotes: 2

Views: 3011

Answers (2)

I use to max-width:Xrem(forexample:3rem); but I don't use percent.

Upvotes: -1

jayms
jayms

Reputation: 4018

The size attribute of inputs specifies the width in (number of) characters. The font is bigger in firefox.

Give your inputs a width using css.

Upvotes: 1

Related Questions