I am trying to style an input field and some buttons in a consistent way, but there seems to be some magic going on. Event though the input has the exact same classes as the buttons it is slightly higher. Also the placeholder text is vertically aligned differently the the inputted text (one pixel higher). Can this be solved with a cross-browser solution?
Edit: As pointed out by Jan Turoň the line height fixed the problem in Webkit. Now, if you check the codepen in Firefox you'll notice that the element still has a 1px border. How to get rid of that?
Thx, PS
Codepen
HTML
<form action="">
Button
<input type="text" class="btn" placeholder="input"/>
<button class="btn">Login</button>
Button
</form>
CSS
.btn, input, button {
display: inline-block;
vertical-align: middle;
line-height: 15px;
font-size: 15px;
font-family: sans-serif;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
cursor: hand;
text-decoration: none;
color: #f2f2f2;
background-color: #1a1a1a;
padding: 7px 12px 8px 12px;
margin-right: 1px;
margin-bottom: 1px;
}
The line-height doesn't shrink the input height below font-size plus some pixels see the MDN info:
On replaced inline elements, like buttons or other input element, line-height has no effect.
Just remove the line-height and you should get what you want even without applying heightstyle. Setting line-height to 130% also does seem to work.
I am trying to solve this for days and every solution is not whole, and not working in different browsers.
I find that this code do the work:
float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;
I have updated Codepen - http://codepen.io/anon/pen/pvqRwE
Related
input[type="number"] field does not showing the placeholder text in latest firefox for certain font family like font-family: 'Open Sans';. The current version is Firefox Quantum 57.0.2 (64-bit)
Still don't know some font family have no such issue
Please check on the demo link https://codepen.io/anon/pen/zpqzEB
body {
padding: 2rem;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
padding: 0 10px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip: content-box;
background-color: deepskyblue;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />
It's your border-box property.
I'm not sure why it's happening on CodePen because it looks fine on JSBin and here on StackOverflow in the snippet you posted. Maybe it's CodePen not working great with Quantum.
Anyway, here's what's happening:
The border-box property will make it so the padding and border are included in total width and height of the element (w3schools.com).
Your input height is set to 40px. That 40px has to include the border, padding-top, padding-bottom, and the height of the element itself. Your line-height is also set to 40px. Your padding styles (you have two rules set, so it picks up the second one) is padding: .5rem 1rem;.
There isn't enough room for the input text in these 40 allocated pixels with.
Issue: 40px line height + top padding + bottom padding > 40px
As for a fix, I'm assuming you want to keep your padding and have your inputs the same size. You may need to make your font size smaller or make your inputs larger. 40px isn't enough for the padding and a 40px line height. Or you can remove that border-box property.
It kinda looks to me that the difference between this property on Chrome and on Firefox is that Chrome is ignoring the line-height. In this screenshot on Chrome, the height of the input is 22px, even though your line-height is 22px.
The root cause of the issue is that font-size is in excess of the number input controls.
Your example can be fixed preciesely by using:
padding: 0.46rem 1rem;
EXPLAINED
When padding is applied to a number type input the padding is applied to the boundaries of the box in the normal way however in some browsers cropping occurs relative to the amount of padding applied.
The cropping effect is calculated from the inside boundaries of the input arrow controls.
The cropping only affects placeholders because they are behind the input layer and become hidden when the interior boundaries of the input field are moved to cover it.
https://codepen.io/anon/pen/qpZPKd
There are various ways to avoid this however my recommendation is to avoid padding on input elements and to use alternate methods to create the desired effect.
Be an illusionist
Personally I don't see any reason to use vertical padding inside input fields. Line-height does a better job.
If you can't make the browsers do what you want make the user think the browser is doing what you want!
body {
padding: 2rem;
}
.Wrap{
box-sizing: border-box;
height: 40px;
border: 1px solid tomato;
padding: .5rem 1rem;
}
.Wrap input {
width: 100%;
height: 100%;
line-height: 40px;
border: none;
font-family: 'Open Sans';
background-color: deepskyblue;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="Wrap"><input type="text" placeholder="Text field" /></div>
<hr>
<div class="Wrap"><input type="number" placeholder="Number field" /></div>
Codepen example
https://codepen.io/anon/pen/QaNOdo
For some reason, when I change to height of your input field to anything above 40px it seems to work. Try this:
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 41px;
padding: 0 10px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip:content-box;
background-color: deepskyblue;
}
I can't see why this fixes it though.
EDIT
You use two times PADDING in your css input declaration...
Just remove the first one : padding: 0 10px;
And keep : padding: .5rem 1rem;
body{
padding: 2rem;
}
input {
display: block;
box-sizing: border-box;
width: 100%;
height: 40px;
line-height: 40px;
background: #fafafa;
border: 1px solid tomato;
padding: .5rem 1rem;
font-family: 'Open Sans';
background-clip:content-box;
background-color: deepskyblue;
}
input[type="number"] {
// line-height: 1.5;
}
<input type="text" placeholder="Text field" />
<hr>
<input type="number" placeholder="Number field" />
I am currently trying to wrap my brain around a problem, but i can't seem to grasp it.
In an unordered list for a navigation, i want to add an icon before every list item via css before pseudo class.
<ul class="list">
<li class="list-item">one</li>
<li class="list-item">two</li>
<li class="list-item">three</li>
<li class="list-item">four</li>
</ul>
My first thought was to give both elements (the icon and the a-tag) display:inline-block and align the icon with vertical-align:middle. With just little adjustments (margin-bottom), this works well in chrome:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: middle;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0.125em 5px;
}
.list-item a {
display: inline-block;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
But when you load the page in firefox, the icon is way off at the bottom. http://jsfiddle.net/pUhPB/4/
I tried what seems to me every possible combination of display, vertical-align and margin-values to get it right in both browsers, and finally, if i give the a-tag vertical-align:middle and the icon vertical-align:baseline, it seems to work:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: baseline;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0 5px;
}
.list-item a {
display: inline-block;
vertical-align:middle;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
http://jsfiddle.net/L3N3f/
But i just don't get it. Why does the first version not work? To me, it seems way more logical than the version that actually works. And which one of both browsers doesn't render the elements the right way?
I already found a solution that seems to work for me, so it's not a very urgent question, but it bugs me that i don't understand the core of my problem (and the solution), so i would be really thankful if someone could enlighten me on this.
thanks
According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not its contents!
So if you apply it to a <span> the <span> becomes aligned with the surrounding text and not whatever is inside it within in.
ispo lorem <span> text </span> due carpe diem
adding span {vertical-align:top; border: 1px solid black} makes <span> text </span> (whole box) become higher than the rest of the text and not push the text to the ceiling of the box <span>.
The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.
For more details click here.
EDIT: apparently if you use vertical-align:top ONLY on the <a> it also works.
Your problem is that per spec setting overflow:hidden changes the baseline position of an inline-block. Firefox implements what the spec says. Chrome does not.
So as long as your .list-item a is baseline-aligned, it will render differently in the two browsers. The only way to make the renderings the same is to make sure you don't baseline-align any inline-blocks with non-visible overflow, which is what your second code paste does (it's using vertical-align: middle on the inline-block).
Try this: http://jsfiddle.net/pUhPB/6/
The first thing I do in these situations is to open the code in both browsers. Then I start removing CSS code until I can see the problem. Removing the margins and the vertical-align, both browsers have rendered the code differently. So I keep removing code until they're both the same. Once they were the same in both browsers, I then changed what I could to get the desired effect.
Here's the new CSS:
.list-item:before
{
content: '';
background-color: red;
width: 5px;
height: 7px;
margin: 5px 4px 0 5px;
float:left;
}
I currently have a simple form with a text input that has a blue background set by css. It all works perfectly and looks good in firefox and ie but not on an iPhone or safari? How can I arrange it so that there is an image behind the input rather than a background?
Please note, there are other images either end of the input, see - http://stack.uk.to
The only issue I see is that the CSS for your input says its height should be 48px. Your images that sit next to it are 50px in height. If you change the input's height to 50px it seems to match.
style.css:
.loginInput {
margin-right: -11px;
background: #0099FF;
padding: 0;
color: #000066;
font-size: 36px;
font-family: 'Cubano', Arial, sans-serif;
vertical-align: bottom;
height: 50px;
border: none;
}
I know this has been asked a couple of times before, but not of the solutions seem to be working in this case. Basically, I want the word "play" to be centered vertically and horizontally on this button. Horizontally, the text behaves itself, but vertically, not matter what I try, it is always a little bit lower than it should, in all browsers I test it on. Does anyone have any suggestions? Thanks
<style type="text/css">
button {
font-family: Verdana, Geneva, sans-serif;
color: white;
border-style: none;
vertical-align: center;
text-align: center;
}
button:hover {
cursor: pointer;
}
button::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
.start {
background-color: #0C0;
font-size: 2em;
padding: 10px;
}
</style>
<button type="button" class="start">play</button>
The padding on .start is likely what you'll have to play around with, although the way it's set, it should be centering it, but you can break it out to something like padding: 8px 10px 10px 10px;
You might also check and set the line-height under .start and see if it helps.
The correct value for vertical-align is middle, not center. However I'm not sure if that'll make the difference, because it might just affect where the button itself is aligned vertically relative to surrounding text. I'm pretty sure button text is vertically centered by default, though...
I'm using <button> to make a post request in a form. I also styled a a.button exactly like the <button> (I need the a.button to make some JS stuff).
The button has some padding, a fixed height. When I do specify the width of the button / a they both look the same. But when I add width to the <button> it ignores the padding.
I'm having this problem in Chrome, Firefox and Opera, so I guess it's not a rendering fault. Also same issue with <input type="submit" />
Here is the basic CSS:
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
The HTML:
Some text
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
Some text
<button style="width:200px">Some text</button>
Fiddle: http://jsfiddle.net/9dtnz/
Any suggestions why the browsers are ignoring the padding? (top and bottom when using height / left and right when using width).
Very weird, I've seen my Chrome has a box-sizing: border-box; rule for input elements, so padding is included in width...
So to avoid that just specify box-sizing: content-box; (some prefix can be necessary).
It looks fine to me, so it might be a style sheet conflict issue. Try using !important to override whatever it may be and that could solve your problem.
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
Hope this helps.
Michael.