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?
Related
I face the same problem for some months.
If I define any sizes or positions in pixels or in EM units, it is differently translated on different screens and resolutions within the same browsers.
For example - I have Dell display 24" 1920x1080pixels and my colleague has 24" older display by Dell with 1600x1200pixels resolution.
The problem is, that the same webpage is displayed differently.
For example, when I want to have two buttons on the same line without linebreak and I set proper pixel width in CSS, so it is not line-broken on my display, it is broken on my colleagues display, so I have to set several pixels less size. The same works for EMs.
One another example:
Position absolute and I am using negative right position of element to have it next to scrollbar. On my computer it is fine, on my colleagues notebook it is bearly visible.
What is the relation between the units and pixel sizes on the screen?
How can I safely write css sheet in CSS3 and HTML5 doctype to have the right compatibility on all resolutions?
The same problem is with buttons / text inputs, when I use just font-size and padding to set the size of buttons and inputs. It looks different rely on resolution of display.
Thanks for help!
You must use an unit that is relative to the viewport, like
vw and vh
em or rem are relative to the font-size defined for the current font. Do you have the font-size defined for body?
Also read this http://www.w3schools.com/cssref/css_units.asp
I've been doing all em based coding, so when I inspect my element and get a width in px, it's just an extra step to do the math. Is it possible to change the units from px to em in Chrome Developer Tools?
EDIT: Images uploaded
Not really. The box dimensions are just the offsetWidth and offsetHeight of the focused element displayed there for your convenience.
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.
I've been working on a personal website (so, time is not an issue here) and I made a base stylesheet where I take care of all the font-sizes, border-widths, line-heights and the like.
I made an effort to use ems all the way, but when I tested the website on other browsers (eg. Chromium) the content didn't match my "pixel-perfect" grid.
So, my question here is, should I use px instead? I mean, I know ems are "the way to go" but nowadays most browsers implement fullpage zoom (they don't resize just the text) and when it comes to dealing with border-width and line-heights, px are more comfortable, because I can avoid subpixel rounding altogether.
What's your take on this? (btw, supporting IE is not one of my goals; i couldn't care less about it)
the content didn't match my "pixel-perfect" grid.
If you're working with a pixel-perfect grid, use pixel values. em is a relative value that works well only if the layout is able to adapt to different content sizes.
I would use em only for elements which size depends on font size.
Elements like borders (and its width) usually does not depend on font size.
When using em for margin and padding, I've found that the relative measurement can do some funny things.
The em can accumulate in nested elements and you find yourself bumping some values back up to align them with outer elements.
This looks fine until you shrink the browser window in very slowly and find that sometimes the values for the nested elements round to a pixel different to the outer parent.
To combat this, I've used rem at the parent level to set the font size and found that this allows parent and descendents to work from the same base relative value.
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.