"em" units. What are and when is it better to use them?

http://lmgtfy.com/?q=how+to+use+css+ems

Um, did it ever occur to you to use the google? A search on em brings up a decent wikipedia article as the very first hit.

@ itto:

As a first time poster to the forum, you may be put off by the answers you received. Don't be. Those answers were probably the best you could get. General questions like yours have invariably been answered comprehensively somewhere on the net; certainly better explanations than anyone here could do at a moment. You say you have looked for answers without success, so your search terms were faulty. Now you have two good links.

Once you have digested the resources, you will be in a position to ask for clarifications on specific issues, on which we can help you.

Professionally oriented forums such as this try to follow certain long established protocols; all aimed at helping the poster help himself. There are sticky threads at the top of each forum that describe many of those common requirements plus those specific to this site. For a background, please read (and enjoy, the authors are sticklers about doing things right, and are humorous to boot) How to Ask Questions the Smart Way.

cheers,

gary

Thanks everyone, I now have a better idea about this subject, seems to me like it's better to use em units as much as possible instead of px for many reasons... I am now converting my site to em, the look is the same but it scales way better, browsers can now scale only the text, and on mobile looks perfect.

Thank you and sorry for my dumb question, next time I will google twice

btw this seems really a great forum!

Jose

Some items are naturally displayed in pixels, for example images. If your site includes these you will very likely need to define some things in px units. Unfortunately most browsers do not rescale images very well and so it is best to avoid the em when adjusting them.

It is often fairly benign to use the px for such purposes when you are defining a distance from the left hand border of the viewport. When defining widths for textual content, however, it is almost alway more correct to use em.

Yeah I noticed that, images are the only things left in my scale that won't scale accordingly, though for pictures (which I don't need to have of a fixed size) I simply set the height to 100% of its container height, and width to auto but with a max-width set to a defined amount of px, so that pics will scale no matter what the size of the container before reaching a limit width.

Be careful with that. Some browsers don't scale images well, and scaling is a computatively intensive task so those with older and slower computers might get annoyed with delays. Five years ago when I was working IT in a Library that could never afford the latest and greatest, we'd often get calls about hung computers and would often find that it was a graphics intensive site that was responsible. graphics intensive sites could bring our whole public network to a grinding halt! There are still a lot of people out their with computers that were made ten or more years ago, and even a lot of people in the good old USA whose internet connections go through 32K baud modems over an analogue phone line.

Some of them live just a few miles south of me on the Olympic penninsuala. I know becasue I've heard the ones who are hams complaining about it on HF single sidband and two meter repeaters.

Thanks for the advice, I will keep it in mind!

I think em are best used in fonts to allow user control over font size for readability, but without changing the layout of the site. So basically only the fonts will be zoomed in/out.

Well, but the newer browsers will rescale the images as well as the text. Firefox does that, for example.

I noticed a weird thing about Firefox and Opera. Those two browsers treat the zooming like a viewport change in size, and since my site layout changes when the viewport is little (to better adapt to mobiles), when zooming in the layout changes, while other browsers don't do that. Also Opera apparently has a bug: when zooming out it doesn't change the layout back, like Firefox do.

Well, the web is not paper, and browsers are not all the same. Some browsers won't show your site at all, but rather speak it to their blind users. A good percentage of visitors will have weak eyesite, like me, and many of them will be color blind as well.

The web allows you to cater decently for all of them via semantic html and CSS. But if you buy into the idea that you should be able to control their experience you will only get more and more frustrated. It's not really possible without writing off a significant portion of your potential audience, which doesn't seem like a good business plan to me.

You need rather to accept that the web was designed to be flexible from the ground up, to cater to pretty well everybody if done right, and to empower the visitor over the designer. That's why the "wysiwyg" editors never work - they are working against the web, not with it.

Design your sites to be at least useable in every user agent, and stylish in most, but forget about looking the same everywhere and you'll end up with better sites for a lot less work.

That's what I really want to learn and accomplish. You say to try not to look the same everywhere, I thought about a site able to change and adapt to different screens and navigating methods (keyboard and mouse, or just fingers for example). I'm not doing the same work twice, with a media query it's automatic. Maybe my site won't be able to speak to blind users, but at least I can say "no problem mobile users"... it's a start, since I'm a newbie yet. But if for some reason CSS won't be applyed, the site will still be completely readable and navigable.

I'll take a look into semantic web you mentioned, if that could help improve accessibility or compatibility.

Thanks for the good advices I feel I have really a lot to learn

The problem is, I think, that most mobile devices ignore @media directives and use the screen stylesheet anyway. They have, presumably, designed their browsers to work with this and if so we as designers will have little or no control over that with either html or css.

Unless we want to get heavily into javascript sniffing I think we're left to trust that the designers of these small screen browsers will display it in such a way that the user can access the website and leave it to them.

The designers of CSS provided a perfectly good mechanism for adapting and, as usual, the big guys went on to ignore this and go their own way. Remind you of anything?

In case I am wrong on the facts here, which I could easily be when it comes to PDA devices about which I know pretty well nothing, I trust someone who does will correct my errors if errors there are.

Since I am retired and only do a few websites for friends who do not rely upon their sites for actual income and on a volunteer and unpaid basis, I haven't really tried to keep up with the PDA wars.

"The Semantic Web" has actually existed for a long time and was the original web until browser programmers got into the thing, alas. What people nowadays call "The Semantic Web" is something rather different, actually, so I say don't worry about "The Semantic Web", but rather about "Semantic web practices", no "the". Not the same thing at all as I understand it.

When I talk about semantic practices saving you tons of time I am most especially not talking about what seems to be called "The Semantic Web" these days.