Wrong vertical align of text in Google Chrome browser - css

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>

Related

Placeholder text padding in firefox

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;
}

Webkit adds extra padding and Firefox does not

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.

Impresspages: site logo padding on bottom, in 'Air' theme; how to remove?

I have searched most of the css files, changed the logo padding in theme.css, but I cannot remove the padding on the bottom of the site logo. There seems to be a 5px padding at the bottom. Is there a way to remove this? Thanks.
Edit: Here is the code in Air theme's, theme.css file, where I can only find logo css references. Thanks again.
.logo {
margin-top: 20px;
margin-bottom: 0;
display: block;
float: left;
padding: 0px;
}
.logo a {
color: #ffffff;
font-family: 'Cinzel', 'Arvo', serif;
font-size: 12px;
font-weight: bold;
}
[[1]: http://i.stack.imgur.com/abkoc.png][1]

The problem is not a padding. The issues comes from browser's interpretation of img in <a> tag. By default all browsers render image with 3px bottom space (and it's not a margin nor padding; just an empty space).
There are 2 ways to remove it:
Float image
Display image as a block
In this case I'd choose the first option.
.logo img {
float: left;
}

Hover html form input over an image

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;
}

difference between Firefox and Chrome padding

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;
}

Resources