/    Sign up×
Community /Pin to ProfileBookmark

Converting my site to ems

Copy linkTweet thisAlerts:
Feb 07.2008

I am interested in converting all of the heights and widths of my site into ems. It is a little hard trying to understand the concept of it, and I have been using a px to em calculator. I am just wondering, when do I know what px side to calculate it from? Here is my example:

My body font size is 12px, so I started calculating heights and widths from that. This worked for a while, but my top nav was looking too small. I realized that my font size for my nav was actually 11px, so when I calculated from that it worked. So, should I always calculate the height width from the parent element? Or how does that rule work?

Also, I am having trouble getting an equivalent value for 1px in ems, what would that be?

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@nnhubbardauthorFeb 07.2008 — It seems that that article is just for text. But I am interested in creating my layout (height, width) in ems. Is this a bad idea? I started to build it with ems but it turned out bad.
Copy linkTweet thisAlerts:
@CentauriFeb 07.2008 — Just be careful with sizing things in em units. If the whole site width is specified in ems, then someone who needs to resize text to read it may also get a horizontal scrollbar, which will annoy them just as much as small text (and be no better than IE7's stupid zoom feature). Good fluid site design will use various units for setting sizes (and in a lot of cases, NOT setting sizes). Em units come in handy where text resize will adversly affect the layout, or you want to keep spacings relative to text size, but don't overdo their use.
Copy linkTweet thisAlerts:
@nnhubbardauthorFeb 07.2008 — Just be careful with sizing things in em units. If the whole site width is specified in ems, then someone who needs to resize text to read it may also get a horizontal scrollbar, which will annoy them just as much as small text (and be no better than IE7's stupid zoom feature). Good fluid site design will use various units for setting sizes (and in a lot of cases, NOT setting sizes). Em units come in handy where text resize will adversly affect the layout, or you want to keep spacings relative to text size, but don't overdo their use.[/QUOTE]

I like what you are saying. So, my main goal is to make our site accessable using IE6 and IE7. In this case, would I just set all text to ems rather than px?
Copy linkTweet thisAlerts:
@nnhubbardauthorFeb 07.2008 — I also get confused, because making the text larger breaks my layout. that is why I was thinking I might need to use ems for layout.
Copy linkTweet thisAlerts:
@TJ111Feb 07.2008 — No, his point is that most designs use a combination of px, %, em, etc for their layout. Personally, things like page width and certain menu items are hard coded as px (that way you avoid a horizontal scroll). Things like div width's I use % just because saying width:30% is easier then figuring out the math for the exact pixel size I want it. Things like text-size, text-margins, text-spacing, etc should all be doing using em so user's who require large text will be able to see all of it (otherwise you will get some text overlap).

Sorry if that is hard to read. Main point, your goal is to make the site accessible to everyone.
Copy linkTweet thisAlerts:
@CentauriFeb 08.2008 — Text resize in IE [B]is[/B] a rather contentious issue. I normally take the view that users who [B]consistantly[/B] need to resize text (due to eyesight problems etc) during normal web surfing, probably will not be using IE by choice, so I usually set the base body text size in px, and scale all other text sizes in %. If the ability to resize in IE is important, there are other roundabout methods that can be used to set the base size and still be reasonably consistant cross browser.

Catering for text resize is probably one of the harder aspects of site design, and the way you handle it will depend greatly on your desired layout. Obviously, extra room must be allowed for increased text, and you have to decide how that extra room should be supplied, and what has to move with it. Generally, people do not want a horizontal scroll bar, so in most cases increased text size should push content down. Wherever possible, the height of elements, and the positioning of following elements, should be determined by the amount and/or size of the content - if you do need to specify heights, then use em units to allow for this. Sometimes the width of elements does need to change with text size (narrow left floated menu bars for example), and the width of these could be set in ems as long as other items can narrow to allow for it. I usually allow for two step increases in size in FF - if the layout breaks a bit when resized further it doesn't worry me a big lot (if the text needs to be resized any further than that, it usually means it was too small to start with).

As with life, web design is full of compromises - you just have to work out which compromises will work best for you / your client.
Copy linkTweet thisAlerts:
@nnhubbardauthorFeb 08.2008 — Ok. Great comments and help here! I appreciate it.

My problem is, I created most of my site using px, and now am wanting to change it to relative units. My first problem is that I use a 2 column layout, the sidenav and body are floated next to each other. But if I set my body font to ems, it always breaks my layout. Does this mean that I need to start using % or ems for those divs that hold my body text and sidenav?
Copy linkTweet thisAlerts:
@CentauriFeb 08.2008 — Got a link to what you are working on online?
×

Success!

Help @nnhubbard spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...