Reputation: 99
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:
FireFox:
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
Reputation: 505
I use to max-width:Xrem(forexample:3rem); but I don't use percent.
Upvotes: -1
Reputation: 4018
The size
attribute of input
s specifies the width in (number of) characters. The font is bigger in firefox.
Give your input
s a width using css.
Upvotes: 1