When I go to http://128.199.58.229/landingpage/ in Chrome and Safari I can read the placeholder text and see the text I input.
In Firefox I don't see any input text.
When I change the padding..
.form-control {
color: #A1A1A1;
font-size: 16px;
padding: 0;
}
I can see the text.. but of course the padding is terrible now. Any fix for this?
Thanks
Change the .form-control to box-sizing: content-box and provide a smaller padding value.
Like this:
.form-control {
color: #A1A1A1;
font-size: 16px;
padding: 10px;
box-sizing: content-box;
}
Currently, the box-sizing: border-box property is combining the padding with the height and creating unexpected results in Firefox.
box-sizing is explained nicely over here on CSS Tricks
Instead of disturbing padding change the height to 54px
.form-control {
color: #A1A1A1;
font-size: 16px;
height: 54px;
}
Problem was height,Your padding is too much
CSS
.form-control
{
height:100%;
padding: 10px;
}
Related
I'm using Viget's In-Field Labels plugin on a form, but even though the label and input have the same font size, same line height, same height, same padding, same everything, the input and label text does not line up. The input text is one pixel lower than the label text.
HTML:
<div class="fieldgroup">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div><!--/.fieldgroup-->
CSS:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
}
.fieldgroup {
position: relative;
}
input[type='text'],
label {
padding: 5px;
font-size: 16px;
line-height: 16px;
margin: 0;
height: 30px;
color: #fff;
display: block;
}
input[type='text'] {
border: none;
background: green;
}
The plugin sets the label's position to absolute and the top and left properties to 0.
Here's a fiddle.
What am I missing here?
It's possible to do this using almost 100% CSS and avoid all the layout flow issues caused by position: absolute;
jsFiddle demo
The trick is to wrap the LABEL around the text and INPUT element. Put the text inside of an element that can be given display: inline-block; margin-right: -100%;. This puts the text directly under the INPUT, which is given a transparent background so the text is visible through the INPUT.
Some Javascript is necessary to make the INPUT background opaque when the field has user input. There's no way around this at the moment… CSS can't "detect" a non-empty INPUT element.
http://jsfiddle.net/d8Apy/12/
Just size your labels & input via line-height. so text-overlap each others since they'll be sitting on same line-height
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial;
}
.fieldgroup {
position: relative;
}
input[type='text'],
label {
padding: 5px;
margin: 0;
line-height:16px;
Font-size:16px;
color: #fff;
display: block;border:1px solid transparent
}
input[type='text'] {
border: none;
background: green;
}
I fixed the issue by tweaking one of the CSS rules:
input[type='text'], label {
padding: 5px;
margin: 0;
font-size: 1em;
line-height: 30px;
height: 30px;
color: #fff;
display: block;
}
The trick is to set the container height to be the same as the line-height.
You can see the effect at: http://jsfiddle.net/audetwebdesign/d8Apy/7/
Why this works???
My guess is that browsers compute the height of the anonymous line boxes differently between input and label elements. At least in FireFox, setting the line-height seems to do the trick.
I don't recall ever reading anything in the CSS3 spec related to these details.
Note - Cross-Browser Effects
I tested this in a few browsers and I discovered that if you set both height and line-height and use box-sizing, you get cross-browser issues. However, if you use line-height and box-sizing, the results are consistent. I have not tested with borders.
I've uploaded this question a while ago but it ended up giving me the tumbleweed badge so I'm trying again.
I'm going through Michael Hartl's railstutorial right now and I've encountered a problem where box-sizing property is interfering with form heights as shown in pictures below.
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
height: auto;
margin-bottom: 15px;
#include box_sizing; <--- this line here is causing issues
}
(box-sizing property in effect)
(box-sizing property not in effect)
Notice how much smaller forms are when box-sizing property is in effect? You can't really view full letters because the height is so low. I've tried to change the height property under input, textarea, ..etc. but it seems like my code is being overridden by Bootstrap. If you have any idea how to make the forms bigger (greater height) I would really appreciate it.
box-sizing: border-box changes the box model so padding is taken out from the height, rather than adding to it.
So this block:
div {
box-sizing: content-box; // default
height: 2em;
padding: .25em;
}
Will be 2.5em tall, and this block:
div {
box-sizing: border-box;
height: 2em;
padding: .25em;
}
will be 2em tall, with .5em of spacing partitioned for the padding.
The other issue is how bootstrap defines the height of inputs:
input[type="text"], ...other selectors..,
.uneditable-input {
display: inline-block;
height: 20px;
...
}
The reason defining a height wasn't working, is because input[type="text"] is more specific than input, and therefore the bootstrap declaration was overriding yours.
To solve the problem you are having with the inputs, define a height and use a more specific selector:
input[type="text"], textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
height: 2em;
margin-bottom: 15px;
#include box_sizing;
}
Demo
Why height in Chrome is bigger than Firefox of input
See example here http://jsfiddle.net/jitendravyas/89Msh/1/
select, input, textarea, button {
font: 99% sans-serif;
}
input, select {
vertical-align: middle;
}
body, select, input, textarea {
color: #444444;
}
button, input, select, textarea {
margin: 0;
}
input, textarea {
font-family: inherit;
line-height: 1.5;
}
input {
border: 0 none;
font-size: 32px;
line-height: 1.1;
margin-right: 29px;
padding: 3px 3px 0;
width: 206px;
border-radius: 7px;
}
The problem is essentially line-height.
Chrome sees line-height much like it sees height and Firefox doesn't.
Adding height to the input should solve the problem, though you should be careful that your line-height and height match.
For example: height: 20px; line-height: 20px;.
http://jsfiddle.net/e2agj/1/ - Last example input is the correct one.
Simply try overflow:hidden on input
I usually use padding instead of height to push the total height of the input. Doing so, I do not have to fight around with the different interpretations of Chrome and Firefox.
I had the same problem and had to combine line-height AND padding to make things work.
I think it has to do with the way you styled the font for the input.
select, input, textarea, button {
font: 99% sans-serif;
}
Each browser has its own rendering for sans-serif, as that is really not a font.
Therefore, without a specific font set, you could expect some inconsistencies.
This should work in Chrome & Firefox on select elements:
height: 20px;
padding: 0;
I had gone throught same input line-height problem across Firefox , Chrome & Opera browsers. So I combined line-height , height and font-size for the appropriate look.
input {
line-height: 45px;
height: 45px;
font-size: 45px;
}
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.
there is a difference in how firefox and chrome render the padding in css.
what appears correct in chrome is extra padded in firefox. is there a way to solve?
.button {
font-family: helvetica, arial;
font-size: 64px;
width: 70px;
height: 45px;
font-weight: bold;
padding: 0px;
padding-top: 25px;
background-color: #000;
color: #fff;
text-align: center;
float: right;
margin: 7px 10px 0 0;
}
If your .button is a button this might be a mozilla inner focus thing... try this?
.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }
Firefox and Chrome render padding exactly the same way. Your problem is elsewhere.
Are you using a reset CSS? If not, the default line-height declaration might be interfering with the rendering of your button.
For one, your height is way smaller than your font-size. Since you don't have overflow specified, your height will always be extended to at least font-size (or whatever your line-height specifies).
If your .button class is actually a <button> element, also apply superUntitled fix.
The focus-inner fix works but I also add negative top and bottom margins to get it to the right height. e.g.:
*::-moz-focus-inner {
padding: 0;
border: 0;
margin-top:-1px;
margin-bottom:-1px;
}
I used to love Firefox, but it has become a bloated mess and fell off my Christmas list years ago.
You are actually correct - there is a bug in Firefox where the button element's line height cannot be changed with the CSS line-height property.
See this link for details: http://www.cssnewbie.com/input-button-line-height-bug/
The solution is to use padding instead of line-height.
u can set a different padding for firefox
.button {
padding:0;
}
#-moz-document url-prefix() {
.button {
padding:10px;
}
}
The way that worked for me was to set the height of the object so that firefox, chrome and opera render it the same way, and remove all padding.
.footertext6{
float: left;
padding-top:10px;
width: 160px;
height:102px; */setting height here*/
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
border-top-right-radius: 50px;
}