I am working on adaptive site, and have made everything in em values. Despite that, I have differences between Chrome and Firefox in interpreting em. Website is dev.morodeer.ru/stroymoidom; problem is with the metal bar with icons. On the width of about 670px everything in Chrome is great, but Mozilla cuts the right edge (as width of centered wrapper is set to 90%). Also, with same width of browsers, metal bar in Firefox is smaller, which leads me to a thought, that Mozilla counts smaller font-size.
The em and ex units depend on the font and may be different for each element in the document.
quoted from: w3.org
maybe you use default fonts and firefox uses a different one as e.g. chrome does?
i'd suggest you to use px or % values instead of em for block-layout size values.
use em for font sizes, 1em = font size of the browser, 2em = 2* font size of the browser, 0.5 em = 0.5*font size of the browser .. and so on ;)
If you already knew that part: yes, firefox and chrome can have different font-sizes and em might influent your font size in a different way then.
Related
Black is firefox, light blue /azure is chrome (barely noticable against firefox), and the dark purple is IE10.
Their font sizes (11px) and font-family (Helvetica) are all exactly the same, however you will notice how much larger IE10 renders its font.
It also seems to apply very heavy anti-aliasing to each character.
I know part of the 'challenge' is creating a site that will work across multiple browsers, but has anyone got any solutions that could correct IE10's increased font size?
I faced the same problem, in IE some parts on my page were broken.
I changed the font-size unit from px to pt, but you have to recalculate the values(divide the px value by approx. 1.36367, 15/11 exactly).
Now the font is rendered with the same size in IE8-10 and FF, no broken parts.
IE9+ uses sub-pixel rendering for fonts, and it results in slightly different size of text boxes (sometimes with non-integer pixel size) compared to other browsers. But here the problem seems to be more in line-height value, which probably is default (based on the font itself) and results in different values in different browsers because of rounding. Setting the explicit line-height value in pixels should minimize the difference.
I read in w3school - font-size property that the difference between using em and px is that when using px IE doesn't support resizing but em does.
I am working on IE7 and it works fine with px and re-size the text when zooming the page.
can any one explain this to me ?
px can be resized in IE as well. em is a relativ size to the inherited size by it's parent element and actually has the same meaning as %.
I don't think you can take any advantage by using em instead of px.
I believe old versions of Internet Explorer have this problem, but new versions fixed it. By the way, W3Schools is often considered a bad resource.
From memory, IE7 will scale / zoom the whole page, but if you select "Page/Text Size" from the menu to change the text size, that is when px or other absolute units are not scaled whereas relative units (eg: em's) are.
I expect you are doing a zoom rather than a Page/Text Size?
I have a set of A tags with display set to block. Each each is specifically has a border on the right. They fit perfectly into a container. However, when the page is zoomed out using the browser's zoom control, everything but the borders scale and the layout is broken. Is there a way to fix this?
This behavior can be replicated in Firefox 3.6.10 and Safari 4.
I had never before noticed that the borders do not scale.
try to set the border-with in em instead of px - if your font-size is 12px, you could write
border-width: 0.09 em;
this will be 1px width in normal size, and hopefully it scales correct (can't test it now, sorry).
There are other things that won't scale either -- radio buttons and select boxes are the classic ones, though it does differ between browsers.
Also, you'll get different effects depending on the sizing units you use for your CSS -- ie whether you use %, px or em, etc. Again, this will vary between browsers.
So the bottom line is that using the browser's zoom function is likely to break things on your layout. I honestly wouldn't expect things to be perfect with zoom, nor the same results in different browsers.
I was reading now about how it’s a good practice to set the font on <body> to 62.5%, so that later you can use the divide-by-10 conversion from pixel units.
But I was wondering: why not set <body> to 6.25%? Then you can use the same dimensions for em units as for pixel units, assuming the default browser font size is 16 pixels.
E.g.
body {
font-size: 6.25%; /* 1px */
}
p {
font-size: 12em; /* 12px */
}
Two issues.
I seem to remember that if you set your initial font size quite small using a relative unit like ems, if the user resizes the text Internet Explorer, the font size will change quite a lot between the settings.
It’s an odd phenomenon, and I’m not sure if it still occurs in IE, nor if you’re worried about users in IE who change the font size.
You’re potentially condemning yourself to re-setting the font size every time you nest elements.
An answer I wrote to another question tries its best to explain this, but in short, if you’re doing your font sizes in ems, you’re better off using font-size as little as possible, rather than making it ever-so-slightly easier to use font-size when you do.
For example: say you want all <li>s on the site to use a font size of 12 pixels.
li {
font-size: 12em;/* 12px */
}
If you then use the following HTML:
<ul>
<li>
<ul>
<li>
...
Then you need to do this:
li li {
font-size: .083em;/* 12px */
}
Otherwise the inner <li>s will be 12 pixels * 12 pixels = 144 pixels!
Ems aren’t pixels. Ems refer to a percentage of the nearest ancestor’s font size, whereas pixels refer to actual pixels. In my opinion, trying to turn ems into pixels is more confusing than the alternative. You’re better off setting <body> to the most commonly used font size on the site, only changing from that when you need to, and putting the intended size in pixels in a comment after your em-based declaration. (That way, it’s easier to tell later if you’ve got something wrong.)
(Of course, the only reason we avoid pixels is because IE doesn’t change the size of text sized in pixels when the user changes the font size in the browser. If you’re not worried about that, then just use pixels.)
Short answer: Don't do this. Use px to set font sizes. If you need a bigger font, use a larger number of px.
Long answer:
The idea behind setting the base font is make it obvious how big a ems and exs are. If your base font size is 10px, then 1.0em is 10px, 1.2em is 12px, etc. It seems simple enough. The idea breaks down as soon as a container changes the font size from the base. If you're in a div with the font size set to 20px, then all the sudden 1em is twice as big as it used to be.
It gets worse. People started suggesting that 62.5% should be used rather than 10px.
(Note that 16 * 0.625 = 10). This was suggested because specifying a percentage for font size is a workaround for an issue with old versions of Internet Explorer. The end user couldn't "zoom in" unless you used a percentage.
However, % (when applied as the default font) is an absolute unit. It may seem like a relative unit, but here, it's a percentage of the user agent's default font size, and font sizes are specified in points. This introduces a subtle and incorrect assumption about the user agent, namely that the screen resolution is 96 dpi. This assumption often results in text which looks like this:
Hey check me out, I'm too small to read!
To sum up:
Don't use hacks for old versions of IE (4 years is plenty of time to maintain backward compatibility; IE7 is four years old this month).
Don't make assumptions about your user agent's resolution, and don't set the body font size to a percentage.
If you need more precise typographical control, use a CSS framework like Baseline.
If you are doing this, you will have to make sure you resize every font on the page. If you miss anything, it will be tiny by default (1px).
Resizing every font may be more daunting then you imagine, because when you use relative font sizes, you have to be very specific.
in my projects i use em for sizing of font only with body {62.5%}?
with this method i can easily calculate em value.
so what are pros and cons if i use em sizing unit for width, height, padding, margin, line-height, even for inline images also along with font for fixed width layouts?
Ems are wonderful units for a good designer. It all rests on what you're taking as pixel perfect. Since most front-enders will only get an image (maybe a .psd file) from the designers, it might seem a good idea to keep every pixel as is. Which is good, except that you can't rely on web browsers to be pixel perfect.
Imagine a browser with a different font, or a font with a different aspect. Imagine a user who enlarges the default font or who zooms in (using those browsers that only enlarge the font). A margin set in px will still show up with the exact px value you gave it. An em-based margin will stretch according to the font-size.
Also, they're not that hard to work with. Define a base font-size and line-height and apply it to your (after a good reset, of course). Then change it only for the titles (you shouldn't have more than 6 titles) and for any region where it makes sense to change the font-size (a sidebar or footer). You will do 3 or 4 calculations, everyone will be happy :)
The biggest downside is in indentation and text-block alignment with fonts of different sizes with em-sizing. It gets hard to line things up exactly – if that's important to you (and it should be).
Well if you understand how em work you can do just about anything you can do with pixels for example but with a bit more calculation.
Actually you could do more, for example, if you have a h1 header you could specify line-height and bottom margin in em's to they always reflect the font size of that header. As you increase a font size of header you increase the margins and line-height too.
This can be used to create a dynamic vertical rhythm for example.
Also if you build a complete web site in relative units you can achieve zoom effect in older browser, etc.
But with modern browsers and if you can afford to not to support behemonts like IE6 you can use absolute units and still get a full page zoom.
Em-sizing is useful for liquid layouts, but less so for fixed layouts. Not to say that it is useless, but a fixed layout is easier to set up using pixels. You can of course continue using ems for font sizing.