Fixing a discrepancy between chrome and firefox

HTML-CSS
1

What’s going on with chrome, and how would I fix that?
What seems to be the issue?

How come it shrunk inside chrome so the background is showing?

https://jsfiddle.net/0bofczwa/1/

chrome

firefox

2

The width is different, and you didn’t explicitly set any width on them. Play around with something like this, just make sure all the percentages add up to 100 of course: https://jsfiddle.net/armd6h58/

1 Like
3

It’s now off by 1 on chrome, what’s the issue there?
How would I fix that?
https://jsfiddle.net/ajq6b2rm/3/

.container-second [type="text"] {
  width: 200px;
}

.container-second [type="submit"] {
  width: 45px;
}

.container-second [type="button"] {
  width: 65px;
}

not good chrome

good firefox

4

The widths need to add up to .second-container's width (in this case 313px):
https://jsfiddle.net/2gf4rbs9/

1 Like
6

I managed to fix my original code.
I’m not really sure what I did.

firefox / chrome both look the same now.
https://jsfiddle.net/2svmxznf/4/


.container-left {
  float: left;
}

.container-right {
  float: right;
}

.container-second {
  width: 311px;
  background: red;
  white-space: nowrap;
}

.radio-inputs {
  width: 129px;
  height: 30px;
  font-size: 22px;
  line-height: 1.3;
  text-align: center;
}

input[type=text] {
  width: 200px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 46px;
  font-size: 22px;
  margin-left: -4px;
}

input[type=button] {
  width: 65px;
  font-size: 22px;
  margin-left: -4px;
}