21 Gecko bug in centered, em-based layouts

I found in my own experimenting, and then also with the Elastic Lawn layout at CSS Zen Garden, that the left-hand side of the layout gets cut off at larger text size settings in Mozilla 1.5 and Firebird 0.7. I’m not sure about browsers running previous versions of the GRE.

Head to http://www.csszengarden.com/?cssfile=063/063.css while using Mozilla and crank the text size up to 200% (1024 × 768 screen) and you’ll see what I mean. This does not happen in Internet Explorer or Opera. This also isn’t an issue when the layout isn’t centered in the screen.

posted at 10:59 pm on January 10, 2004 by Greg

22 Bad Advice

body { font-size: 80%;
}

This is bad advice. The trade-off with setting fonts this way is that users who actually set the text-size in their browser will get a font-size smaller than their specified preference (granted, they may have also set a minimum size option). These users will have to resize their text every time they enter and exit your site. Annoying.

IE users generally don’t know they can resize text. However, if they find resizing doesn’t work on your site (and the next site and the next) it won’t reflect badly on your site, rather they will blame their computer. This is a good thing. It puts pressure on Microsoft to fix their software.

Pixels are the better option IMHO (80% is a trick to get a 12-13px size in most browsers anyway). It does not harm users of huge monitors provided they set their resolutions apropriatly, and users of up-to-date browsers can resize if need be. Only set em’s on the body if you want to tap into the user’s preferences.

Let the market sort out the problem. Don’t fix broken browsers at the expense of users who do the right thing.

Otherwise, good article.

posted at 04:30 am on January 11, 2004 by Adrian

23 Elastic dropdowns

I came up with pretty much the same principle for a site i’m working on. The problem was that the client requested a header navigation bar using dropdown menus. So I had to make the dropdowns elastic too.

I based the dropdown menus on the <a >previous article </a> of Patrick and added some nifty javascript code

U can find the result <a >here</a>.

Thanks for the article. It certainly cleared up things and added a very interesting third option to the fixed vs fluid debate.

posted at 04:40 pm on January 11, 2004 by Johan Janssens

24 Yes, but...

Well, let me start by saying that I liked the article very much. It was informative and the examples were quite interesting. The problem I’m having is that the more I look into and research this subject the less I am able to determine whats the best solution I should use.

This article states that using EMs along with some minor hacks is an effective way to get “elastic” user adjustable type and layout sizing using CSS, however, other articles here in ALA and elsewhere claim that EMs and % are not the best solution at all and should be avoided in favor of pixel sizes or no sizes at all (“Dao” design I guess). These articles have also been quite persuasive and informative on the subject.

I think what I’d really like to see, and what is needed is a table or side by side comparison of the pros and cons of each technique – a more consice breakdown of the techniques concepts and their appropriate usage.

As a Web Coder for a state government agency, I want and need to make my site accessable to as many folks as possible, and stay compliant with current coding standards and techniques as well.

I’d hate to be a usability hardnose and commit to absolute sizing to keep my sites orderly and readable to the average user, but it’s getting way too complicated to do something so simple as create a site that works across browsers and looks and behaves well too.

I have to say though, that ALA is one of, if not the most valuable resoruces ANYWHERE for Web Coders like myself to find useful information such as this. Very accessable, timely and informative!

Thanks again for your excellent work!

posted at 02:41 pm on January 12, 2004 by Critter

25 floating problem

But how do you place div in the center of your page with internet explorer 5? at http://www.easy2rent.nl i have problems with getting this right. does anyone have an idea?

posted at 08:21 am on January 13, 2004 by VisualMedia

26 I am sorry

it should be:
http://www.easy2rent.nl/index.php

posted at 08:22 am on January 13, 2004 by VisualMedia

27 .0001%?

So, Marcel, you’re saying two things here:
1. That programmers, webdevelopers, and others “in-the-know” about font resizing make up .0001% of users.
2. That you want your site to look good at all times.

I’d ask how you know came on the statistic for number one and if number two is true why wouldn’t you use the elastic technique to make your site look good “at all times” (at all times meaning at different screen resolutions and when the user controls font sizes).

Yes MS offers the magnifier, which very few home users really know about. My grandmother after having gotten her first computer wasn’t given a manual that said “If you need glasses use the ‘Magnifier’” she did however manage to find the View -> Text Size -> Larger from the menu pretty quickly.

I personally think that you can’t make assumptions about what capabilities your users do or do not have. I feel more comfortable making the extra effort to accomidate the user base than attempting to enforce all of my own ideals upon them.

On the flip side of that if you are building a site for yourself and you are the target audience then build it however you want. But really how many people are building sites just for themselves. Take into account that the users are not you.

posted at 08:54 am on January 13, 2004 by Michael R. Haqvard

28 Elastic everything

I managed to make everything elastic for this web comic site: http://www.bohemiandrive.com

There’s quite a bit of javascript for keeping certain things centered vertically and for keeping div heights matched, but barring that it’s not very hard syntactically. (Regarding javascript, I essentially had to poll the text size with an invisible div 1 em from the top of the page because Opera doesn’t seem to fire any events when you scale the page.)

In most places the effect is more interesting than beneficial, but for the strips themselves it’s actually useful (I think) because it lets you zoom in and out on the panels, for instance to see more context if you want to. It would be a pain to size all the images with ems manually, I’m sure, but for this site the images (panels) are uploaded through a backend that figures out their size automatically and stores their dimensions, which are converted to ems when the pages are rendered (16 pixels to 1 em).

posted at 08:58 am on January 13, 2004 by Alec Reed

29 Elasticity and zoom

At the moment I’m viewing this in IE 5.1/Mac, a browser I don’t normally use, at 800 × 600 on a 15 inch CRT screen (14 inches viewable) at 120%, and with “Allow page to set colors” unchecked. The example summary page for this article seems to be a little too elastic. When I zoom above a certain percentage, the text goes right off the screen, making paragraphs hard to read. Any reasonably usable solution needs to at least allow paragraphs to be readable without horizontal scrolling. That is also why Opera’s zoom feature and Microsoft’s magnifying glass are not particularly helpful features: they require both vertical and horizontal scrolling. Actually, magnifying glass features tend to make me a bit seasick.

On a personal level, how much trouble I am going to go to in order to read a site depends on how much I need to get information (or want to get entertainment) from that site. If a site is midly hard to use, I generally grumble but still use the site unless there’s an easier-to-use alternative. If a site is too hard to use, and I don’t need to use that site, I tend to leave that site. I will only write the Webmaster and complain about the site’s accessibility or usability if I absolutely have to do business with that site.

I happen to run (as a team member) a site that people have to do business with, for a government agency. We made the decision long ago, for accessibility, to stick with the browser’s default font size for the body text. We have never got a complaint about the font size being too large, except from my co-workers who have an eye for design, something I don’t claim to have. There are probably some people out there who are grumbling about our font size, but it doesn’t make the site unusable for them so they don’t complain.

We partner with other sites to provide certain services. Again these are sites people have to go to, with no other Web sites as alternatives. If someone has a complaint about these sites, they sometimes direct these complaints to us. One of these sites, which is heavily used, recently changed from browser default font size to a reduced font size, and I saw a few user complaints about that. (And any actual complain represents multiple complaints.)

Personally, I do like to see nice design, but font size is not the place to exercise it. If it’s uncomfortable for me to use your site, I don’t care how beatiful the design is, I will curse it. I’m there for the content. If I can get the content easily without having to switch browsers or go into my preferences, then I’m happy to admire your design.

posted at 01:45 pm on January 13, 2004 by Charles

30 Re: Bad advice

Adrian wrote:
>>>
body {
font-size: 80%;
}

This is bad advice. The trade-off with setting fonts this way is that users who actually set the text-size in their browser will get a font-size smaller than their specified preference (granted, they may have also set a minimum size option). These users will have to resize their text every time they enter and exit your site.

[…]

Pixels are the better option IMHO (80% is a trick to get a 12-13px size in most browsers anyway). It does not harm users of huge monitors provided they set their resolutions apropriatly, and users of up-to-date browsers can resize if need be. Only set em’s on the body if you want to tap into the user’s preferences.
<<<

I don’t follow your argument. Let’s say that someone has set the default font size of his/her browser to 50px. Then, let’s say that he/she visits two sites: one where the font size is set to 12px, one where it’s set to 80%.

In the first case, the browser would display 12px fonts, and the user would have to resize the text on each visit, just as you say he/she would have to do with percents or ems (with the difference, of course, that the browser used by the vast majority of people doesn’t resize px sizes).

In the second case, though, the browser would display 40 px fonts (80% of 50), which MIGHT still be too small, but at least a lot better than 12 px – meaning that IF the user needs to resize the text, it’s going to be easier (e.g. bump it up ONE notch instead of three or four).

Bottom line: the only way to NOT tap into the user’s preferences is to not set font sizes at all, but if you’re going to set them, ems and percents are better than pixels, because even though your sizes might be suboptimal, they’re at least proportionally suboptimal to the user’s default.

posted at 05:30 pm on January 13, 2004 by Peterman