I'm trying to make a input look like plain text. The aim is to draw a span, when user clicks the span it hides and displays an input that looks like plain text, but editable by the user.
In Chrome and Firefox I cannot get rid of top and bottom paddings, even if I set padding and margin CSS properties to 0.
My CSS looks like this:
input.myInput {
font-family: "segoe ui";
font-size: 20px;
padding: 0px;
margin: 0px;
outline: none;
border: 0px;
vertical-align: baseline;
}
See that font size is set to 20px. Chrome and Firefox add 4px padding-top and padding-bottom, so that input is 28px tall, not 20px as expected.
You need to reset the line-height of the input element to be 20px as well. By default, some browser add 4px (2 top + 2 bottom) to input element's line-height.
As Diodeus suggested, just add height to your input.
input.myInput {
font-family: "segoe ui";
font-size: 20px;
height: 20px;
padding: 0px;
margin: 0px;
outline: none;
border: 0px;
vertical-align: baseline;
}
line-height will not work
It could be your font. Try setting the CSS height of the input directly or try adjusting line-height.
Related
Check this Jsfiddle first.
Here my <input> with has a height of 10px; has given a padding of 10px;, I know it is not a right way of giving style. But still, it's working perfectly in Chrome, IE and Safari but it is an another story when it came to Firefox it crops my placeholder.why.?
I know different browsers have their different rendering methods but can anyone point me the exact reason behind this and is there a way I can solve this without changing the height, padding or font size(it should not be less than 14px).?
Please check if it works for you
input {
padding: 10px;
font-size: 14px;
font-weight: normal;
width: 100%;
line-height: 18px;
height: auto;
}
They count height and padding differently, try this.
Use only height or only padding. Here I add height and only x padding
input {
font-size: 14px;
font-weight: normal;
width: 100%;
height: 30px;
padding: 0 10px;
}
As you can see below, both Gecko and Blink performs an inconsistent height calculation for different inline-block elements, even though they all have the same css class. It seems like (*pause*) Trident is the only layout engine to get it right.
Did I forget to (re)set a property?
Furthermore, as you can see in this fiddle, if I change the padding from .3em to 1em Blink renders as expected. All elements gets the same height. Gecko is still "broken" though.
Does anyone know why this is happening and how to fix it?
<a> <button> <input> <span>
Gecko (Firefox v. 39.0)
Blink (Google Chrome v. 43.0.2357.132 m):
Trident (Internet Explorer v. 11.0.9600.17843):
body {
font: normal 15px arial;
padding: 1em;
}
.button {
background: #444444;
border: none;
box-sizing: content-box;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: arial;
font-size: 1em;
height: auto;
line-height: normal;
margin: 0;
min-height: 1em;
padding: .3em;
text-decoration: none;
}
<a class="button" href="#">button</a><button class="button">button</button><input class="button" type="button" value="button" /><span class="button">button</span>
For Gecko (Firefox), it is due to borders on ::moz-focus-inner for form elements. If you notice, the form elements (input and button) are always ~2px wider and taller than other elements.
To solve it, always add this to your CSS (as part of your reset):
button::-moz-focus-inner{
border:0;
padding:0;
margin-top:-2px;
margin-bottom:-2px;
}
input::-moz-focus-inner{
border:0;
padding:0;
margin-top:-2px;
margin-bottom:-2px;
}
The negative margins are necessary so that the font displays "correctly" in the line-height. You may need to tweak the values to fit your line-height, but these values mostly work fine.
For Blink (Chrome), the elements are actually the same size, but the only issue is that they are "mis-aligned". You'll notice that sometimes the form elements display slightly lower than the others in an inline-block setting. To solve it, simply ensure that they all use the same vertical alignment, e.g.:
display: inline-block;
vertical-align: top;
It is always a good practice to declare the two properties above together - if you specify inline-block, always remember to specify the vertical alignment, in order to prevent misalignment.
I have a problem trying to make a search button looking fine on firefox. It's an input submit made with an iconic font, a white background and a border-radius like this:
display: block;
width: 60px;
height: 60px;
line-height: 60px !important;
padding: 0;
background: white;
border: 0;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-khtml-border-radius: 30px;
font-family: 'iconic';
color: #bad104;
font-size: 5em;
It must look like this (chrome and IE renders perfectly my code) : http://img341.imageshack.us/img341/6590/kogy.png
But when i use the same code on firefox, here is what I get: http://img17.imageshack.us/img17/953/jms4.jpg
I looked on dom inspector on both browsers, and when i look at "calculated values", it doesn't renders the same thing on chrome (line-height: 60px) and firefox (line-height: 67px).
Everything I've tried from now is a fail :/ I hope you guys will have some help for me :)
Thanks !
You shouldn't define a unit of measurement with line-height, this is so that the spacing is relative to the font size. In your example
line-height: 60px;
should be
line-height: 1;
or
line height: 100%;
as you are specifying that you want it to be the same height as the font.
Button line-height in FF is hardcoded as line-height: normal !important; meaning that even a user defined line-height: xxx !important will not override it.
Give these a read:
https://bugzilla.mozilla.org/show_bug.cgi?id=349259
https://bugzilla.mozilla.org/show_bug.cgi?id=697451
I am using CSS to make input button look like a link.
I've styled it like this:
input#linkLike {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
display: inline;
vertical-align: baseline;
}
This works fine in Chrome, but there is a whitespace around button in Ff and an even larger whitespace in IE.
http://jsfiddle.net/S4nF9/5/
Where this whitespace comes from, and how can I remove it?
According to this page,
Firefox uses pseudo-elements within the button elements themselves for drawing. As you can see above, this means that padding of 2px is added to the top and bottom of this inner pseudo-element, therefore it may be removed as follows:
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
So that's Firefox taken care of. See new fiddle.
(Note: the article mentions top and bottom, but it also works for the left and right padding.)
I don't have IE here, so I can't test that now, sorry.
You could give it a width value.
I'm working on a site's CSS and am running across an issue with the body margin section. If you look at this in Firefox and then IE, you can see the line isn't lined up right in Firefox, but it is in IE. (In the black header section).
Here is what I have for the body tag, It's something with the margin and I can't figure it out:
body {
margin: -2px;
padding: 0px;
background: #E7E7E7 url(images/bg01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #888888;
}
Thank you for any responses!
You've placed the image with the text "Nickelson Associates" inside a table cell with a default padding which is 1px in MSIE. You need to force the td element in question to have a padding of 0.
That said, using tables for layout/positioning is considered bad practice.