I'm having an issue with inconsistency with inputs in chrome.
I'm using a big font-size, but setting the height and line-height to smaller to remove gaps above and below the text.
input {
font-size: 100px;
padding: 0;
margin: 0;
height: 80px;
line-height: 80px;
}
IE and Firefox seem to render it correctly, but chrome seems to add padding to the text of the input.
Fiddle showing what's going on here: http://jsfiddle.net/tomdickie/nZY8r/1/
EDIT:
To add a bit more clarity, to this here are some screenshots:
Firefox
Chrome
I'm trying to get Chrome to behave like Firefox (and IE) do.
try this and its woring here
HTML code
<input type="text" name="uname" value="223" />
and CSS code is
input {
font-size: 100px;
padding: 0;
margin: 0;
/*height: 80px;
line-height: 80px;*/
}
I've tested this code.
Related
Take the following HTML and CSS:
<html>
<body>
<td class="colorpick">
<input type="color" name="head" value="#aec7e8">
</td>
</body>
</html>
input[type="color"] {
border: none;
width: 24px;
height: 24px;
}
On Chrome, Safari, and Internet Explorer, this appears to follow the CSS, and the input appears as a square.
Chrome screenshot
Safari screenshot
However, on Firefox, it appears as a very very narrow rectangle that does not follow the CSS. This is consistent between devices and between versions of Firefox. How do I make the color input match the shape that it is in the other browsers?
Firefox screenshot
Desired:
FF Result:
Let's get rid of borders, margins and paddings:
input[type="color"] {
border: none;
width: 24px;
height: 24px;
border:0;
margin:0;
padding:0;
}
Fiddle: https://jsfiddle.net/qkyhn7pj/
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;
}
My code is perfect for Chrome, but not for others ..
Look at pictures, the parent of ul has a margin-top to his child (ul). It's working fine for Chrome, but for others it's too much !
Chrome (it's ok)
Firefox and Safari (not ok)
I'm not using webkit or moz, nor transition or other property like that.
EDIT
Sorry I forgotten the code ^^
The ul is in .wrap-orange-notre-vision :
#section-notre-vision:before{
content: "UNE OFFRE QUI MODERNISE ET AMÉLIORE VOTRE RELATION CLIENT.";
text-transform: uppercase;
position: relative;
font-size: 1.4em;
font-weight: bold;
margin: 30px auto 0 auto !important;
}
section#section-notre-vision{
height: 555px;
min-height: 500px;
}
.wrap-orange-notre-vision{
margin-top: 925px;
}
EDIT
It was just due to WordPress 😐
Pretty sure each browser renders html and css slightly differently due to some specs in the browsers code. I cant remember exactly what the difference is, but i know that there is a small difference.
I have a input select box and I have to align the text in this box.
In Google Chrome, Firefox and IE <= 9 it works fine.
But the Safari don't use the padding..
Here my code:
<select class="anrede1">
<option>Frau</option>
<option>Herr</option>
</select>
.anrede1, .land {
font-family:'Roboto Condensed';
font-size: 22px;
color: #575656;
margin: 10px 10px 10px 0px;
width: 100%;
height: 42px;
text-align: left;
padding-left: 17px;
border: 2px solid #e1eef9;
font-weight: 300;
}
http://jsfiddle.net/jhne7pfe/
Some ideas to fix that?
Its a late answer but I was searching for a solution to the same problem for a while. Using text-indent shifted the elements around the input element and the padding was still ignored.
-webkit-appearance: textfield;
Using that solved my problem, hope this saves someone else time.
as far as I know W3 specs don't allow to use padding in select fields. So Safari doesn't support it.
But you can use the following instead of padding-left:
text-indent:17px;
This should work fine.
Not sure, if my last comment reply came through:
As I don't have a Safari installed here, I hope this helps. Try to use:
padding-left:17px;
-webkit-padding-start:17px;
instead of
text-indent: 17px;
The -webkit-padding-start is for chrome and safari browsers only and should be ignored automatically, if padding-left works.
Unfortunately I also have no jsfiddle account yet.
Will be done as soon as possible ;-)
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