How do I make my inputs line up the same on Firefox as they do on Chrome?

Question

I'm trying to get my elements to align properly on Firefox on a small screen (I'm 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 for aligning 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 the screen to a size less than 400 pixels on Firefox, the elements do not wrap nicely as they do on Chrome, which is what I want — https://jsfiddle.net/7z662891/2/ . What do I need to do to get my Firefox alignment to behave like Chrome?

Answer 1

I see a couple of problems here.

Resets

First of all you have to be aware that each browser will display various elements differently by default. So your first step is to add resets. You can try things like

Meyerweb
Normalize
Super Form Reset.css

Form styling

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

Math

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

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

Instead try

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

Because everything needs to add to or less than 100% when you are placing them side by side.

Also be aware that calc is 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 line with no whitespaces, this resets the default margins 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 the CSS to not use flex-boxes since sometimes there are issues that occur with using them. Also made the box-sizing: border-box; include everything within #searchContainer , so all the widths would be based on the box containing the border rather than just the content width, with the width increasing when there is a border, or when there is padding, and set the input text types to have 4px padding so that the text has room to breathe on all sides.

A media query was added to make the inputs line up to the next line when it is 600px or narrower.

Is this what you were looking for?

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

Answer 3

With Firefox, the form does not seem to contain the input elements as Chrome does. Firefox lets the form's internal elements spill over the form's boundary before wrapping as the browser width is decreased.

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

Answer 4

don't use calc value in css because it wont support all the browser. try to use width as percentage value.

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