When using same font, chrome and firefox give them different line heights, and sometimes you need them to be the same across browsers... Right now when encountering this issue, i have to give both font size and line height in pixels, but it doesn't seem like the best solution. Should different units be used may be? How do i make chrome and firefox render fonts similarly?
You can set line height as a pure number, which will by definition be taken as relative to the element’s font size, e.g. line-height: 1.2.
You can alternatively use the em unit, e.g. line-height: 1.2em, but then inner elements would inherit (unless they have their own line height set) the computed value, not the relative number. This matters if nested elements have different font sizes, and usually it’s the relative line height that should be used.
Please use a CSS reset from Yahoo, that should resolve cross browser issues.
Related
We have a number of divs on a page containing text. The text is explicitly set to a certain font-size via CSS. In some circumstances the font-size is increasing without our intervention. It seems to be related to the length of the text in the DIVs. i.e. once it gets to a particular size adding a character increases the font-size, removing it again reduces the font-size.
We haven't got any fancy libraries included to scale the font.
In chrome dev tools it shows the variation in the font set via CSS, and then the computed size here:
Why does the font go from 16px to 19.555555px? What are we missing?
thanks!
I'm designing a website and using jquery UI majorly for the icons/icon-classes it provides.
While testing in chrome what I see the default height of a span element which wraps some text without padding or border gets a height of 20 px.
I understand it will differ with the type of font and size, the defaults and the browser. Is there anyway I can set height of a text to a given size?
If I understand correctly, it seems your facing this problem because of the way different browsers render fonts.
If you font sizes are influencing their parent elements size, then you may need to rethink how you are using margins and padding's.
EDIT
You could use line-height to try and tame the behavior.
I'm using a basic list in my website which works fine with FF and IE. However, there is one line of pixel missing with Chrome.
JsFiddle thanks to Jared in comments.
If you don't see the missing line, change the value of zoom, it will appear at some values (90% for instance on my PC).
Any idea of the source of the problem?
Screenshot:
The grey line jumps of one pixel.
The main problems found:
On some screen sizes, the width of the dt and dd, plus the horizontal margins and padding, may be adding up to more than 100% for each line. The safest approach is to use % values for the widths, as well as the horizontal margins and padding, rather than em.
The use of margins to place the dd tags on the same line as the dt tags is problematic. A safer way to implement the layout is to float every dt and dd tag and specify clear:both for each dt tag. It may be possible to do this correctly using margins, but floating the elements is much simpler.
Updated demo. (note: This demo hasn't had any margins or padding added to it. The widths of the dt and dd should be reduced by however much is added to the horizontal margins or padding.)
Minor font problems found:
What's consistent
No font-family was specified, so the default serif font is used.
No font-size was specified, so the default of 16px is used.
line-height:2em is twice the font-size, which is twice 16px, which is 32px (shown by the height of the gray first line.
The height of the gray first line is 32px in both Chrome and Firefox.
What's not consistent
In Chrome, the default serif font with a font-size of 16px renders with a baseline height of 12px (the height of a capital H).
In Firefox, the default serif font with a font-size of 16px renders with a baseline height of 11px.
What can be avoided
The default serif font renders inconsistently in different browsers. There's no way to prevent that font from doing so. But you can avoid some of the inconsistency by choosing a font other than the default serif font. Some fonts, like Arial, render more consistenly from browser-to-browser.
What can't be avoided
Even then however, there will still be some inconsistencies in how text renders. Within the line-height space used by the text, the position of the text will often vary by at least 1px from browser-to-browser. That's not something that can be prevented. It's a result of how the operating system happens to render that particular font-family at that particular font-size with that particular line-height in that particular browser. But the inconsistency can be minimized by always specifying an explicit line-height, which has already been done in this case.
Summary
Choosing a font-family, a font-size, and a line-height helps to minimize the inconsistency. But beyond that, there will always be little inconsistencies in the text that cannot be avoided. Every website on the internet has some amount of this. It's usually not very noticeable.
Check this jsfiddle
Why is there a difference in size of the datepicker when font-size is set to 1.5em?
The amount of em's is not important I have tryd different font-sizes and I still get the same problem. The red box is set to 460px and is there for you to see the difference in size of the datepicker in firefox and chrome/safari.
Edit: I have already try'd using px insted of em
Firefox uses DirectWrite to render text, and Chrome doesn't.
That is the reason for the ever so slightly different size of the rendered text.
There is no way to make the text pixel-perfect the same size between the two browsers.
Read this: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite
And this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
Because 1.5em isn't a precise size and depends on what the browser decides the relevant font metrics to use are.
If you want a precise size, use either px or points.
As you know, you can specify dimensions with CSS in px or em. As far as I understand it, em means "line height of the current element's fonts". My approach currently is to always use px (also for margin which seems to be a controversial practice).
Question: Can I rely on the ratio of px and em to be the same across browsers? If not, then my manually specified margins between paragraphs will likely look odd because they so not match 1em anymore.
I believe that it is better to use em for margins but I have quite a base of existing code that always uses px margins.
No. ems are relative to the user's chosen font size, px aren't. The default font sizes of desktop browsers are about the same in pixels, but mobile devices in particular will vary even before user adjustment.
You should use em for a margin in text content that should be sized similarly to the surrounding fonts, and px for a margin that has to line up with images used by the page layout.
No, you cannot.
The size of em in pixels is related to the font type & size you're using, the resolution of your screen (depending on OS, browser), and possible further OS and browser settings - eg "Show fonts +10%" may alter the em value.