I have a placeholder and I want to give padding to it. So far it's working in chrome but not in Firefox.
In Chrome
In Firefox
there is no padding applied
This is my css
.form-control::placeholder {
font-size: 15px;
padding-left: 15px;
}
and for firefox
.form-control::-moz-placeholder{
font-size: 15px;
padding-left: 15px;
}
You can give the input padding as well to achieve the same effect. It is also going to have padding for when the user inputs text into the text box and not sit against the left border.
.form-control {
font-size: 15px;
padding-left: 15px;
}
Related
I'm trying to use css3's :first-letter to create drop caps effect, but Firefox does not render it the same way as Chrome and IE10 do. Here is jsfiddle in which you can see the 2nd "P" is cut off at top and bottom in Firefox.
http://jsfiddle.net/0256dxdb/18/
Is this a bug in Firefox? Below is my css:
p.test1 span,
p.test2:first-letter {
float: left;
font-family: arial, serif;
font-size: 70px;
line-height: 70px;
margin: 10px;
background:red;
}
I have problem with creating "button" element (text in inline-block container with border), because in some font-size text has wrong vertical-align (is not perfect middle).
I want to use Raleway (Google Web Font) and Bootstrap.
Height of the text container is set by line-height.
I am testing it on Windows 7...
on Firefox (ver. 36) everything is perfect
but the problem is on Google Chrome (ver. 41)
Live preview: http://biznes-dynamit.pl/test/marcin-dobroszek/font/
Part of CSS code:
/*Bootstrap default style*/
* {
box-sizing: border-box;
}
.btn {
display: inline-block;
vertical-align: middle;
}
/*custom style*/
body {
font-family: "Raleway";
}
.btn {
padding-top: 0;
padding-bottom: 0;
line-height: 16px;
font-size: 11px; /*real height: 8*/
}
.btn-sm {
font-size: 10px; /*real height: 7*/
line-height: 15px;
}
.btn-lg {
font-size: 12px; /*real height: 8-9*/
line-height: 16px; /*light, normal*/
}
As you can see in Chrome preview in some font-size and font-weight text is go up relative container.
3x zoom sample, with font-size: 11px (line-height: 16px) and font-weight: semi-bold.
Top and bottom space (between text and top/bottom border) should be the same: 4px, but as you can see top space has 3px and bottom has 5px.
Is it possible to fix this browser issue?
This very annoying problem is caused by chrome not taking text-transform: uppercase into account. Use the following to get correct centering in Chrome with all-caps text:
text-transform: lowercase;
font-variant: small-caps;
Fiddle: http://jsfiddle.net/fyvyB/76/
Works great for buttons, for other usecases you might have problems with the text being small-caps and not real caps.
Had a similar issue with a custom font. After some playing around and trying all different display properties on the text element, I noticed that the vertical align issue only affected text elements whose parent was display: block;, despite said text element being set to display: inline;. I resolved the problem by changing parents to display: table; and the child text elem to display: inline;, e.g. below... I can't explain why this worked, but posting here in case it helps others...
<style>
div {
display: table;
}
span {
display: inline;
padding: 5px 10px; /* to make v-alignment clearer */
}
</style>
<div>
<span>Some text here</span>
</div>
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;
}
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;
}
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;
}