First time I've ever noticed this but is probably an easy one. How come IE and chrome give different heights to fonts? What are the best practices to combat this? This is messing up my header layout, I'm trying to get it to look the same on all browsers.
The code to produce Img:
<html>
<head>
<style>
body{margin:0;}
div {
margin-top: 5px;
font-size:16px;
}
.c1 {
font-family: Arial;
background: blue;
}
.c2 {
font-family: Lucida Sans Unicode;
background: red;
}
</style>
</head>
<body>
<div class="c1"> My Text 1 </div>
<div class="c2"> My Text 2 </div>
</body>
</html>
Edit: - Additionally
Here is an image of the text laid over one another. The text height in pixels is the same in each but the problem seems to be that they don't both use the same margin/padding(whatever it is) at the top and bottom of the text.
Have you tried setting defaults for the webpage?
This problem actually looks like it is line-height.
Browsers tend to render things differently from one browser to the next. Try setting defaults.
Line-height actually changes the size of the line the text sits on. Might be padding in this case...
line-height
margin
padding
font-size
Theres a lot of defaults you should/could set. This does not ensure the same look from one browser to the next. It does help alot though.
Good luck!.
It's only because you haven't set a font-size, so it uses the default size of that browser. I tried the code and had the same thing, but after setting a size it didn't show up anymore.
div {
margin-top: 5px;
font-size: 30px;
}
And just for your knowledge, you can use rem to set size by default browser size, like this:
div {
margin-top: 5px;
font-size: 1.5 rem;
}
And that gives you 1.5x the default size of the browser.
Update
Problem seems to be in line-height, which you should set for the divs. It could also be the padding of the divs. Try setting those and I hope it helped. If not then try setting div display: block.
Related
This is my problem in short: https://jsfiddle.net/b6wLwkfs/
Long story: I have a div with some text in it. It initially creates some space on top and bottom of my div (this is not padding). I would like my div to only cover the text and not create extra space. This is my only css:
div {
background-color: black;
color: white;
font-size: 50px
}
<div>This is the text</div>
What I am looking for is to narrow down the div to only contains the text without creating any space on top of bottom. I acknowledge that if you tweaking a bit with px, you will achieve that but I am looking for more generic approach since font size will be different by cases.
Your code below is missing a (;) after font-size: 50px; now to achieve the space reduction I suggest you use line-height with the same font-size refer to my correction
Your Code
div {
background-color: black;
color: white;
font-size: 50px
}
My Correction
div {
background-color: black;
color: white;
font-size: 50px;
line-height: 50px;
}
There is likely no 'generic' way to do this, as that spacing you're seeing is actually part of the font face, and whatever adjustments you make to solve the 'problem' for this font, will not necessarily work on other fonts.
For example, just take a look at how Arial displays, as it's different than the default font that is used without setting a specific font-family, and as such a fix for the default font would likely have to be adjusted for Arial.
p {
background-color: black;
color: white;
font-size: 50px;
line-height: 1;
font-family: arial;
display: inline;
}
<p>
Oh hi i'm different
</p>
In the above snippet I've added a line-height of 1 to help normalize the spacing a bit. You could try to adjust further with setting the line-height to be at, or close to the exact font-size in pixels, but this will likely result in undesired spacing if you have lots of text in the element (text should also be in an appropriately semantic element like a p, or li, not just in a div).
In the end, can you achieve the result you're looking for? Definitely. Using things like line-height, margins and/or transforms. But you are likely not going to find a silver bullet to achieve the effect you want, consistently, if swapping out font faces.
As Sebastian Brosch mentioned in the question's comments, working off from Is it possible to change inline text height, not just the line-height? is likely going to be your best path forward.
I want the text to be perfectly aligned to the picture. But the text has some room on each side. This is supposed to be shown on different devices so just hardcoding like top : -3 px won't work.
Is there any way to make the text snap to the top of the div.
The blue area is the selection overlay that shows the div when I hover over the html element chrome inspect:
<div class="content-with-padding">
<img src="http://www.slu.se/Global/externwebben/overgripande-slu-bilder/utbildning-bilder/SLU-Karriar/logos/logo_forb_tria.gif" />
<span>
<div class="medium-title">Title</div>
<div class="small-text">Some text</div>
</span>
.medium-title {
font-size: 17px;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
}
.small-text {
font-size: 14px;
}
img {
float: left;
}
JSFiddle: https://jsfiddle.net/fx314qhh/
top:-3px won't work because it deals with positioning. More than likely you probably need to use padding-top:-3px;. If that doesn't, we'd need to see code because it is impossible to answer by looking at a picture
Try
line-height: 0
And adjust the margin-top: value.
Or a lower line-height value. (e.g., 1em line-height would be relative to the font-size as 1:1em)
Sicking to px in this scenario is your best bet for cross browser consistency.
Without code, it's going to be hard to identify the exact issue, but lets give it a shot.
All text has something called line-height which is the amount of space from the top of the font to the bottom of the font. Most fonts build in padding along the top to make multiple lines of text readable. CSS allows us to adjust that.
p {
line-height: 14px;
}
This code will tell all <p> elements to have a total line-height of 14px. If your font is taller than 14px it will overlap.
If this doesn't fix your problem, then the issue probably has to do with the margin/padding.
Try:
.medium-title {
font-size: 17px;
line-height: 0.8;
}
https://jsfiddle.net/fx314qhh/1/
I've spent a few good hours debugging myself, and a few good hours researching but nothing seems to be solving my problem. I have a caption in my header that is supposed to be cut-off at the bottom, which looks fine in Safari and Chrome, but in Firefox it is positioned much higher:
First window: Firefox
Second window: Safari (chrome renders the same)
I spent about an hour and a half changing everything around in my CSS thinking it had to do with other elements around it, but made no progress. Finally I decided to make an extremely simplified version to see what the problem is:
First window: Firefox
Second window: Safari (chrome renders the same)
Same exact thing. I have a CSS reset applied so that is not the problem. I've tried setting the line-height, but that didn't fix it. I've tried every value for the CSS display property. Nothing is fixing this.
HTML/CSS for test example above:
<div class="test">
<h1>Test</h1>
</div>
.test {
margin: 0;
padding: 0;
width: 100%;
height: 185px;
line-height: 185px;
border: 1px solid red;
}
.test h1 {
font-size: 12em;
}
My website can be viewed at samrapdev.com.
Quick link to CSS stylesheet
In short, I need to figure out how to get both browsers to display the text at exactly the same height
Try and specify a font-family in your stylesheet though it's not pixel perfect
#header .youAreHere h1
{
...
line-height:1;
}
line-height must be set on h1, unless you have something like
* {line-height:inherit;}
Even if you take a webfont and define the line-height of your element you can have variations due to the line-heights of the other elements.
What works for me is to define the line-height of the body on the top of using a webfont.
Also do not forget to reset margins and paddings for all elements you're using. A good trick is to use a reset.css before your actual style sheet (you can find some at http://www.cssreset.com/)
body{
line-height: 1;
}
I have discovered an inconsistency in the way Chrome adds padding to span tags. When using a simple span tag with a small font-size and a text, the padding above and below is larger than in Internet explorer. When using a large font-size the padding is the same.
This can be tested with the following code/jsfiddle
<span>Testing A Text</span>
<span>Testing A Text</span>
body
{
font-family: Helvetica,Arial,"Sans Serif";
font-size: 10px;
}
span
{
border: 1px solid red;
}
span:last-child
{
font-size: 200%;
}
(Can be previewed here: http://jsfiddle.net/gR9em/5/)
Of course, this can be solved by conditional CSS or using different fonts but that is a thing I would like to avoid if possible. This might be "Arial" -related... However, could anyone explain this and perhaps provide a solution? Or is this a known browser CSS "bug"?
Example with image here:
I don't believe the issue is related to padding, but rather line-height.
Example with correct padding: http://jsfiddle.net/qh3aY/1/
Ideally you would set up the line-height on the <body> but I wanted to follow the OPs markup.
IIRC, <span> elements should always be inside another element like a <p>.
I have tested the jsFiddle again in Chrome and it seems like the padding below the text has disappeared and the padding above the text is less than it was when I posted this issue. Maybe something was updated in Chrome.
I guess the line-height should ideally not work differently between different browsers...
Say I have a single span element defined as an inline-block. It's only contents is plain text. When the font size is very large, you can clearly see how the browser adds a little padding above and below the text.
HTML:
CSS:
span {
display: inline-block;
font-size: 50px;
background-color: green;
}
<span>BIG TEXT</span>
Looking at the box model, it's clear the browser is adding padding inside the content edge. I need to remove this "padding", one way is to simply alter the line-height, as with:
http://jsfiddle.net/7vNpJ/1/
This works great in Chrome but in Firefox the text is shifting towards the top (FF17, Chrome 23, Mac OSX).
Any idea of a cross-browser solution? Thanks!
It appears as though you need to explicitly set a font, and change the line-height and height as needed. Assuming 'Times New Roman' is your browser's default font:
span {
display: inline-block;
font-size: 50px;
background-color: green;
/*new:*/
font-family: 'Times New Roman';
line-height: 34px;
height: 35px;
}
<span>
BIG TEXT
</span>
The browser is not adding any padding. Instead, letters (even uppercase letters) are generally considerably smaller in the vertical direction than the height of the font, not to mention the line height, which is typically by default about 1.2 times the font height (font size).
There is no general solution to this because fonts are different. Even for fixed font size, the height of a letter varies by font. And uppercase letters need not have the same height in a font.
Practical solutions can be found by experimentation, but they are unavoidably font-dependent. You will need to set the line height essentially smaller than the font size. The following seems to yield the desired result in different browsers on Windows, for the Arial font:
span.foo
{
display: inline-block;
font-size: 50px;
background-color: green;
line-height: 0.75em;
font-family: Arial;
}
span.bar
{
position: relative;
bottom: -0.02em;
}
<span class=foo><span class=bar>BIG TEXT</span></span>
The nested span elements are used to displace the text vertically. Otherwise, the text sits on the baseline, and under the baseline, there is room reserved for descenders (as in letters j and y).
If you look closely (with zooming), you will notice that there is very small space above and below most letters here. I have set things so that the letter “G” fits in. It extends vertically a bit farther than other uppercase letters because that way the letters look similar in height. There are similar issues with other letters, like “O”. And you need to tune the settings if you’ll need the letter “Q” since it has a descender that extends a bit below the baseline (in Arial). And of course, if you’ll ever need “É”, or almost any diacritic mark, you’re in trouble.
I'm a designer and our devs had this issue when dealing with Android initially, and our web devs are having the same problem. We found that the spacing between a line of text and another object (either a component like a button, or a separate line of text) that a design program spits out is incorrect. This is because the design program isn't accounting for diacritics when it is defining the "size" of a single line of text.
We ended up adding Êg to every line of text and manually creating spacers (little blue rectangles) that act as the "measurement" from the actual top of the text (ie, the top of the accent mark on the E) or from the descender (the bottom of a "g").
For example, say you have a really boring top navigation that is just a rectangle, and a headline beneath it. The design program will say that the space between the bottom of the top nav and the top of the headline textbox 24px. However, when you measure from the bottom of the nav to the top of an Ê accent mark, the spacing is actually 20px.
While I realize that this isn't a code solution, it should help explain the discrepancies between the design specs and what the build looks like.
span::before,
span::after {
content: '';
display: block;
height: 0;
width: 0;
}
span::before{
margin-top:-6px;
}
span::after{
margin-bottom:-8px;
}
Find out the margin-top and margin-bottom negative margins with this tool:
http://text-crop.eightshapes.com/
The tool also gives you SCSS, LESS and Stylus examples.
You can read more about it here:
https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce
I had a similar problem. As you increase the line-height the space above the text increases. It's not padding but it will affect the vertical space between content. I found that adding a negative top margin seemed to do the trick. It had to be done for all of the different instances of line-height and it varies with font-family too.
Maybe this is something which designers need to be more aware of when passing design requirements (?)
So for a particular instance of font-family and line-height:
h1 {
font-family: 'Garamond Premier Pro Regular';
font-size: 24px;
color: #001230;
line-height: 29px;
margin-top: -5px; /* CORRECTION FOR LINE-HEIGHT */
}
This worked for me:
line-height: 80%;
If its text that has to scale proportionally to the screenwidth, you can also use the font as an svg, you can just export it from something like illustrator.
I had to do this in my case, because I wanted to align the top of left and right border with the font's top |TEXT| . Using line-height, the text will jump up and down when scaling the window.
The best way is to use display:
inline-block;
and
overflow: hidden;
I've been annoyed by this problem often. Vertical-align would only work on bottom and center, but never top! :-(
It seems I may have stumbled on a solution that works for both table elements and free paragraph elements. I hope we are at least talking similar problem here.
CSS:
p {
font-family: "Times New Roman", Times, serif;
font-size: 15px;
background: #FFFFFF;
margin: 0
margin-top: 3px;
margin-bottom: 10px;
}
For me, the margin settings sorted it out no matter where I put my "p>.../p>" code.
Hope this helps...