13 replies [Last post]
itto
itto's picture
Offline
Regular
Italy
Last seen: 11 years 6 weeks ago
Italy
Timezone: GMT+2
Joined: 2010-08-18
Posts: 11
Points: 13

Hello everybody, my name is Jose!

I started using CSS some months ago, and though I now feel more confident with them, I didn't yet understand very well what are "em" units and how/when to use them properly... are they only needed in prints or what?

Didn't really find anything much explanatory until now.

Thanks in advance
Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 12 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

http://lmgtfy.com/?q=how+to+u

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 20 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Um, did it ever occur to you

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 2 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

@ itto: As a first time

@ 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. Smile

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

itto
itto's picture
Offline
Regular
Italy
Last seen: 11 years 6 weeks ago
Italy
Timezone: GMT+2
Joined: 2010-08-18
Posts: 11
Points: 13

Thanks everyone, I now have a

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 Tongue

btw this seems really a great forum!

Jose

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 20 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Some items are naturally

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

itto
itto's picture
Offline
Regular
Italy
Last seen: 11 years 6 weeks ago
Italy
Timezone: GMT+2
Joined: 2010-08-18
Posts: 11
Points: 13

Ed Seedhouse wrote: Some

Ed Seedhouse wrote:

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.

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.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 20 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

itto][quote=Ed Seedhouse

itto wrote:

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

itto
itto's picture
Offline
Regular
Italy
Last seen: 11 years 6 weeks ago
Italy
Timezone: GMT+2
Joined: 2010-08-18
Posts: 11
Points: 13

Thanks for the advice, I will

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

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.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 20 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

itto wrote: Thanks for the

itto wrote:

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

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

itto
itto's picture
Offline
Regular
Italy
Last seen: 11 years 6 weeks ago
Italy
Timezone: GMT+2
Joined: 2010-08-18
Posts: 11
Points: 13

I noticed a weird thing about

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.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 20 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

itto wrote: I noticed a weird

itto wrote:

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

itto
itto's picture
Offline
Regular
Italy
Last seen: 11 years 6 weeks ago
Italy
Timezone: GMT+2
Joined: 2010-08-18
Posts: 11
Points: 13

Ed Seedhouse wrote: You need

Ed Seedhouse wrote:

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 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 Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 41 weeks 20 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

The problem is, I think, that

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.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.