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
It’s now off by 1 on chrome, what’s the issue there?
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
[off-topic]
Are you aware that instead of using jsFiddle, if the script is copied and pasted into a standalone web-page then most popular browsers have the following wonderful feature:
[/off-topic]
The quickest solution I found is to set display: inline-block; to the container .container-second.
At least it looks good in Chrome.
The inputs are basically inline-blocks by default, that’s why they are able to accept the widths that were set.
The problem was using negative left margins on the inputs.
input[type=submit] {
font-size: 22px;
margin-left: -4px;
}
input[type=button] {
font-size: 22px;
margin-left: -4px;
}
That was done in order to hide the whitespace nodes that were created. But that method is a magic number that never works 100%. It is evident when you zoom in/out. As seen below…
The old way to fix it was with display:table on the parent and display:table-cell on the children.
You can eliminate all the problems and do your alignment at the same time using flexbox.
flex-layout.html (2.4 KB)
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html,
body {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
background: #000000;
}
.outer { /*the flex body centers this vertical & horizontal*/
border: 1px solid lime; /*visual aid for testing*/
padding: 10px;
font-size: 22px;
font-family: "Times New Roman", Times, serif;
}
.inner {
display: flex;
flex-flow: column nowrap;
}
.first-row, .second-row {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.second-row {
background: #000;
justify-content: stretch;
}
.radios {
cursor: pointer;
background: green;
border: 1px solid #0059dd;
white-space: nowrap;
padding: 2px 8px;
}
a,
a:visited,
a:active {
outline: none;
text-decoration: none;
color: #000000;
}
input, button {
font-size: 22px;
border: 1px solid #0059dd;
background: #000;
font-family: "Times New Roman", Times, serif;
}
button {
cursor: pointer;
background: green;
}
input[type=text] {
color: #0059dd;
width: 210px;
}
input[type=submit], input[type=button] {
color: #0059dd;
cursor: pointer;
height: 30px;
border-left: 0;
}
a:focus,
button:focus,
input:focus {
outline: 0;
}
p.content {
margin: 20px 0 0;
border: 1px solid #0059dd;
font-weight: 900;
padding: 5px;
color: #0059dd;
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<audio autoplay id="player"></audio>
<div class="first-row">
<div>
<button id="button">Play / Pause</button>
</div>
<div>
<div class="radios"><a href="" target="_blank">Radio Inputs</a></div>
</div>
</div>
<div class="second-row">
<input id="input" type="text" name="someNameHere" value="http://hi5.1980s.fm/;">
<input id="sent" type="submit" value="Set">
<input id="clear" type="button" value="Clear">
</div>
<p class="content">Some randm text<br> Some randm text<br> Some randm text</p>
</div>
</div>
</body>
</html>
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;
}
Are you sure? This is how it looks to me in Firefox:
Was that your intended look?
No you didn’t you are still using magic numbers as Ray pointed out that will not work for all cases.
Use the proper method that Ray showed 
Ray’s method shows red also.
See:
.second-row {
background: red;
justify-content: stretch;
}
Not for me it doesn’t. Are you sure you copied his code exactly?
Did you change black to red then zoom in?
.second-row {
background: red;
justify-content: stretch;
}
I didn’t change anything. I downloaded Ray’s flex-layout.html file and ran it in the browser. My understanding was that you don’t want any red, and in Ray’s version, there is no red.
If you have other requirements, then please explain them more clearly.
In Ray’s background is Black. So, of-course no red is going to show. If you change background to red, red will show when zoomed in.
.second-row {
background: red;
justify-content: stretch;
}
A couple of adjustments will fix it, I thought you’d be capable of fine tuning it yourself.
First, lets get the heights the same on the top row…
Remove the top padding from radios
.radios {
cursor: pointer;
background: green;
border: 1px solid #0059dd;
white-space: nowrap;
padding: 0 8px;
}
Next make the input[type=text] the same height as the others, that’s what was showing the red background.
input[type=text] {
color: #0059dd;
width: 210px;
height: 30px; /*add this*/
}
Now things are lining up and you can zoom in with a red background that will not show.
.second-row {
background: red;
justify-content: stretch;
}
Though the red BG is unnecessary I put it back in to show you that this method does indeed work.
flex-layout.html (2.4 KB)
I haven’t tested, but I see three different input types.
IMHO, styling them so they’re not easily distinguishable is probably not the best UX design.
Might the “one pixel lower top border” be a result of browser defaults? Would “text only” zoom (as opposed to page zoom) break the design?
Sorry for blathering on, it just seems to be too “magic number-ish” and fragile from what I can see. I have a feeling a lot of potential problems could be avoided if more appropriate HTML was used.
This worked both on your code, and the original code.
non-flex
It just needed a height added to it.
https://jsfiddle.net/yzavb9k5/
input[type=text] {
width: 200px;
height: 30px;
No, it is still using the magic numbers negative margin. You are attemting to hide the whitespace nodes that your HTML formatting has created. Your inputs are basically inline-blocks and when they are on their own line in the HTML it creates a whitespace node.
If you want to know more about this then read through this old Sitepoint CSS Quiz.
Test Your CSS Skills Number 35 - inline-block
Here is your fiddle with a red line showing for me right when I land on the page. You may be trying to code for your devices but that don’t mean that everyone will see it the same as you. The when I zoom in the gaps jump around.
Here is the last code I posted using flex.
Additionally you can view this codepen and remove the node fix to see the whitespace nodes.
https://codepen.io/Ray-H/pen/oMwKRr
Remove these lines from .nav
.nav {
/*display:table;/* Remove this line*/
/*width:100%;/* Remove this line*/
text-align:center;
/*word-spacing:-1em; /* Remove this line*/
margin:1em 0 0;
padding:.25em 0;
list-style:none;
background:#000;
}