I've been investigating why the widths in FireFox and Chrome show a significant difference. This variation is causing a problem with my Modal in the views.
Chrome:
https://i.sstatic.net/D0lgu.png
FireFox:
https://i.sstatic.net/do4YU.png
Upon comparing the photos, it's clear that the width of the input in Chrome appears as desired. However, in FireFox, the width is larger by 60 pixels compared to Chrome. After researching, I initially suspected the issue was related to box-sizing. Consequently, I set the input element to have box-sizing: border-box;, but unfortunately, this adjustment did not resolve the discrepancy. Following is the HTML and CSS code:
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;
}