The widths of inputs vary between FireFox and Chrome

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;
}

Answer №1

When it comes to inputs, the size attribute determines their width in terms of characters. Interestingly, the font appears larger in Firefox.

One effective way to control the width of your input elements is by utilizing CSS styling.

Answer №2

My preferred method is to set a max-width of Xrem (for example: 3rem); I do not use percentages for this.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The angular-block-ui feature fails to run my HTML code as a personalized message

I'm looking to enhance my UI by implementing a blocking feature with a spinner display. My attempt involved the following code: blockUI.start("<div class='dots-loader'>Minions are Working!</div>"); // code for fetching data ...

Determining the optimal time to utilize the addClass function in jQuery and CSS

One of my HTML elements has the class "article": <article> Content </article> In my jQuery script, I want to add specific classes that have been predefined: $('article').addClass('rounded box-shadow gradient-bright'); I ...

Building a row of five dynamic columns using Bootstrap's responsive design

I'm looking to set up a row with 5 responsive columns that have equal padding on all sides, but I'm struggling to find the best way to do this using Bootstrap. Here's my current HTML: <div class="row five-col-row"> < ...

Is it possible to retrieve event.data beyond the onMsg callback function in JS SSE?

My current project involves using three.js to display accelerometer data in real-time and in 3D on a web browser. To transfer data from the remote server to the client side, I am utilizing server-sent-events (SSE). While I have successfully implemented th ...

What is the best way to translate these CSS properties into Mui?

I am currently in the process of transitioning my CSS code to utilize MUI's sx prop and styled() function. However, I have not been able to find any documentation on how to properly convert the following code to MUI syntax. Can someone assist me with ...

Can you explain the distinction between ' &:hover' and ' & :hover' pseudoclass selectors?

While styling a Material-UI Button, I encountered an unexpected behavior when adding hover effects. When using & :hover, only the inner span of the button was affected. However, when using &:hover, the desired style was achieved. What is the diff ...

"Trouble with image height not scaling correctly in Internet Explorer when using the img tag

I am facing an issue that can be observed by visiting this link using Internet Explorer. Interestingly, everything functions perfectly in all other browsers (although Chrome displays little blue squares next to the images for some unknown reason). Here i ...

Exploring the effective utilization of bootstrap's push and pull functionalities

I've been struggling to rearrange my bootstrap columns for mobile view, but my code just isn't cooperating. It's likely that I'm making a mistake somewhere. Here is the snippet of my code: <div class="container"> <div cla ...

Troubleshooting problems with background-image in CSS using Javascript

My latest project involves coding to assign background images to various classes using jQuery. The image files are named in a numerical order, such as 0bg.jpg, 1bg.jpg, 2bg.jpg, and so on. for (i=0; i < 8; i++) { $('.hpCarousel:eq('+i+' ...

Create an interactive quiz using JQuery that focuses on sorting and organizing

Hey there, I need some advice on creating a quiz for ordering and sorting in HTML5/JQuery. Basically, I want to display a random set of steps on the page that users have to organize correctly. I found an example using jQuery and jquery-ui-1.8.5.custom.min. ...

Set the current time to ISO8601 format

I need assistance with creating a "time passed" counter for my website based on an API call that returns data in the following format: "created_at": "2018-05-16T14:00:00Z", What is the best approach to calculate and display the time that has passed since ...

Issue with Django and Bootstrap navbar button and search field interaction

After extensive searching and attempts, I have yet to find a solution to my issue. I am currently working on an exercise using Django + Bootstrap to create a navbar. However, I can't seem to get the search button to align properly with the search fiel ...

Tips for adjusting the value of a textbox up and down

I am facing an issue with my booking flight form that is supposed to take input from users regarding the number of travelers. I have three textboxes for Adult, Children, and Infants respectively, along with a main textbox to display the final result. Howev ...

Gathering information from an HTML form and displaying it through JavaScript by utilizing Bootstrap's card component

I've been working on integrating form data from my index.html page into a card component using Bootstrap. I've successfully collected the data in the backend, but now I'm struggling to display it on the frontend as a card component. Any help ...

Insert a new row with a designated row class

I have a table with 2 columns and an "add row" button. However, I want to add a new row between the rows with the classes "title" and "ongkir". Currently, the new row is being added after the "ongkir" row. Can someone please assist me in achieving this? B ...

Issues with iFrame Alignment

I recently created a digital catalog using FlipHTML5 and realized it needed to be more mobile-friendly. To address this issue, I included the following CSS: .size { width: 85vw; height: 75vh; Although this adjustment made the catalog display correctly on ...

React-tooltip and a challenge with Server-Side Rendering in Next.js

In my Next.js app, I make use of the react-tooltip library for tooltips. One peculiar issue that I have noticed is that whenever I refresh a page containing a tooltip, I encounter the following error: react-dom.development.js:88 Warning: Prop `dangerously ...

Setting both the height and row height of the table is not allowed

Currently employing js DataTable, I aim to establish a default height for the table and row. My current approach is as follows: $(document).ready(function() { var table = $('#example').DataTable ({ iDisplayLength: 15, "bLen ...

Updating the placeholder text of a textarea using a conditional statement in PHP

I currently have a textarea within a form that is being outputted: <textarea id='textarea' name='msg' rows='2' maxlength='255' cols='80' placeholder=' Share a thought...'></textarea> ...

Bringing in a JavaScript file into a Svelte component

Today, I stumbled upon Svelte and I am really intrigued by the concept. However, I encountered an issue while attempting to import a small helper.js file. No matter what I try, whenever I reference the class, I receive the error: ReferenceError: Helper ...