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.
Related
One of the specs for Web accessibility level AA that is text can be resized to 200% without loss of content or function.
So if I zoom up to 200%, everything needs to look right.
How can I achieve that regarding the font size?
The issue is not so much a matter of font size or font size units, since most common browsers have a built-in zoom function that will zoom any text, regardless of the font size unit. The issue is that resizing may result in text containers that start to overlap, which then causes some content or functionality to become invisible (because it ends up behind something else). Success criterion 1.4.4 was written when zooming functionality was not yet as widespread as today. (In 2008, there were several browsers that supported zooming, but many people were still using older browsers that didn't support zooming, and text resizing—which is not quite the same as zooming—could cause overlap in web content.)
So, while using units such as em, %, rem etc. is a good idea, you need to make sure that text containers (such as section elements, nav, etc.) that are displayed next to each other don't overlap when you zoom in to 200% or resize text up to 200%. For example, you can describe column width using units such as % or em, or you can make sure that text containers that are next to each other at the default size end up below each other when zoomed in. If you use responsive design to make your web pages adapt to different screen sizes, you should also be able to handle zooming in desktop browsers.
You should try using em instead of px..
For example if you have div inside yourbody - suppose the font-size of the body of the page is set to 16px.
If the font-size you want in div section is 12px, then you should specify 0.75em (because 12/16 = 0.75).
You should try use "rem" (support most of the browsers).
Then you set the font-size of the root ( the html).and all the page reasize for example if you want the "h1" be always 2 times the body ,set it to 2rem;
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.
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.
All major browsers today use page zoom by default, as opposed to "text size". "text size" options are still there, but they are a bit more hidden [especially in Chrome and Firefox]. Given this fact, is there still a reason why EMs are advantageous over PX or %? Why?
Most browsers indeed are capable of sizing pixels, and Zoom is now the more popular way which works well across browser - there is even a very simple fix the old IE6 behaviour of not being able to 'text size' (declare the original body size as a percentage - 100% will do - then fire away with pixels)
Remember too that if a user so desires, or needs to, they can set their own minimum pixel size so if they're basing their defaults on pixels why go through the nightmare of calculations..
IMHO pixels are perfect for text and borders (who needs to size a border lol..), always have been really.
em and percentage really are the same thing well they work identically, and their inheritance can be an absolute nightmare.. em's are great for widths and heights for a bit of fluidity
So no, I don't think we should still use them for text.. not that I ever did ;)
Even with the page-zoom feature turned off, most major browsers these days are capable of resizing text in px units. I think it was IE6 and under that was not capable of resizing px-based text.
I prefer specifying sizes in px just because I think it's easier than working off "relative" sizes.
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.