How do I make my inputs match Firefox, like in Chrome?

Question

I'm trying to get my elements to align correctly in Firefox on a small screen (Im using Mac El Capitan). I have these elements

<div id="searchContainer"> <h1>Search For Race Results:</h1> <form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" value="✓" type="hidden"> <input name="first_name" id="first_name" value="Dave" placeholder="First Name" type="text"> <input name="last_name" id="last_name" value="" placeholder="Last Name" type="text"> <input name="event" id="event" value="" placeholder="Event" type="text"> <input alt="Search" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" type="image"> </form></div> 

and I have these styles to align things

 #first_name, #last_name { width: 40%; /*make the width like event so all the input fields looks good*/ } #event { width: 100%; } #last_name, #event { margin-left: 2px; } #event { margin-right: 2px; } input.search_button { /* Search-button will be center when meda screen < 400px */ -ms-flex-negative: 0; flex-shrink: 0; } @media only screen and (max-width: 400px) { /*set the max width 400px so they will wrap after the media screen reach 400px*/ #search-form { -ms-flex-wrap: wrap; flex-wrap: wrap; } #first_name { width: calc(50% - 8px); margin: 0; } #last_name { width: calc(50% - 8px); margin-left: 2px; } #first_name, #last_name { margin-bottom: 1px; } #event { width: calc(100% - 35px); margin-right: 2px; } } 

But notice, when I compress a screen up to 400 pixels in Firefox, the elements don't wrap as well as they do in Chrome, and this is what I want - https://jsfiddle.net/7z662891/2/ . What do I need to do to adjust the alignment of Firefox as Chrome?

Answer 1

I see a couple of problems here.

Reset

First of all, you should know that by default each browser will display different elements in different ways. So your first step is to add drops. You can try something like

Meerweb
Normalize
Super Reset.css form

Style styles

Add specific styles to the things you want to be consistent. Otherwise, you will get the default value.

Math

Try not to mix px and % . For example, you used

 #last_name { width: calc(50% - 8px); margin-left: 2px; } 

Try instead

 #last_name { width: 48%; margin-left: 1%; } 

Because everything needs to be added or less than 100% when you place them side by side.

Also keep in mind that calc not supported in many older browsers. You can read more at https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 2

If you put your inputs in a string without spaces, this resets the default values ​​to 0.

 <input name="first_name" id="first_name" value="Dave" placeholder="First Name" type="text"><input name="last_name" id="last_name" value="" placeholder="Last Name" type="text"><input name="event" id="event" value="" placeholder="Event" type="text"><input alt="Search" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" type="image"> 

I rewrote CSS in order not to use flex boxes, because sometimes there are problems associated with their use. In addition, box-sizing: border-box; includes all #searchContainer , so all widths will be based on the field containing the border, and not just the width of the content, and the width increases when there is a border, or when there is indentation, and set the input text types to 4px padding so that the text can breathe with all sides.

A media query has been added so that the inputs match the next line when it is 600 pixels or narrower.

Is this what you were looking for?

JSFiddle example: https://jsfiddle.net/xbpsx6ur/8/

Answer 3

In Firefox, the form does not contain input elements, as Chrome does. Firefox allows internal form elements to spill along the border of the form before the wrapper as browser width decreases.

I suggest having a div inside the form, and then use that div to contain input elements. Some CSS updates may also be required, but it can help Firefox behave like Chrome for your HTML.

Answer 4

don't use calc value in css because it doesn't support the whole browser. try using width as a percentage.

 Example: #first_name { width:35%; margin: 0; }