The below HTML and CSS render differently on Webkit and Firefox. Webkit shows an extra 1-2 pixels of padding between the top of the text and the border.
<div id="R">HELLO WORLD</div>
#R {
border: thin solid blue;
display: inline-block;
font-size: 20px;
font-family: Helvetica;
color: red;
padding: 0;
margin: 0;
line-height: 1;
box-sizing: border-box;
vertical-align: baseline;
}
https://jsfiddle.net/p0wh01p4/21/
Where does it come from and how does one fix it?
Edit: below is a semi-transparent Firefox screenshot superpositioned over a Chrome screenshot to show the difference. Vertically they are lined up and horizontally they are shifted slightly relative to each other.
Related
Please see this minimum example:
span {
font-family: Helvetica;
border: 1px solid red;
font-size: 40px;
}
<span>1299</span>
Screenshot:
Chrome
Firefox
As you can see, Firefox renders the typeface a little taller; why is this?
Is it possible to make Firefox look like Chrome?
Update
Adding line-height and display: inline-block makes the red container same height, but the font position remains incorrect, please see this minimum example:
span {
font-family: Helvetica;
border: 1px solid red;
font-size: 40px;
line-height: 1.5;
display: inline-block;
}
<span>1299</span>
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>
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'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;
}