When in doubt, take a look at the source. The anchor tag has a background image of a dotted underline. The a:hover has switches that to an animated version. Quite a nice effect if a little extraneous.
Copy & paste the code below to embed this comment.
Markus
I’ve seen solutions to this problem using IEs proprietary ‘expression’ extension to CSS. IE uses width: [removed]) and the rest of the world uses max-width. I think that’s a reasonable use of IEs expressions.
A very good article. After I use the font size approach, the font appears in the same size in both IE 5.0 and Netscape most of time (I have tested so far). A problem on the Netscape 7.1 is that the percentage seems to be ignored sometimes. Font on one page is small, it may be bigger on the next page. How to work around this problem?
I’m not a designer, just an amateur who got tired of comments like “It looks fair to horrible on my big monitor…” So I got around to making a liquid layout using percentages for dimensions and absolute positioning (in progress)
http://www-personal.usyd.edu.au/~ctillam/japanland/3puzzles/3puzzles.html
Then I found this article, and am now experimenting with ems as a layout and text dimension: great. So nice to see the container expand with the text. Just one thing…
On a mac, using IE5, I had my body style set at 100% and a div which wraps all the text set at 1.2em; within, there’s a nested div with a margin-top of 1em.
Guess what: blank screen. No text at all.
Then I scrolled down, and there was the text, about one-third of the scroll-bar’s travel downwards. A top-margin of 1em on the nested div translated into, at a guess, 1200 pixels.
NS6 and Mozilla render as styled.
This behaviour is consistent for font sizes greater than 1.13em and less than 1.25em.
One of life’s little mysteries.
IE6 Win and points
And while we’re on text-resizing capabilities: I happily accepted what you see written everywhere, including ALA, that Internet Explorer will resize text set in points. This is a miserable and misleading half-truth, as you too can find out for yourself if you investigate the settings at Tools/Internet Options/Accessibility.
Yes, IE6 will resize text set in points—if you tell it to ignore the incoming font-size; then it gives you its own five-step range. But if you tell it to honour the incoming font-size, you’ll see what “no-resize” really means.
Copy & paste the code below to embed this comment.
Marleen van den Brand
I just got my new laptop with a screen resolution of 1920×1200 pixels, one of those wiiiide screen things, websites with a table width 0f 100% are unreadable, i almost have to move my laptop from right to left over the table to read text (if i want to keep my head still), but i also can flip the screen (in windows xp you can for these tablet pc’s) than you get a really long and small website, I’m still figuring out what the is the best solution to make a website readable on both screens..
I was glad that this article finally gave us a way to make the most of em’s without compromising too much, but one thing struck me as a result of it – as well as providing for a liquid/elastic design, what would you do if someone was browsing your site with a Page Zoom level set way high? Sure your text will flow, but sometimes it might be better to tailor the content based on the font size also.
For example if you’re showing the first X words of an article – at a “standard” font size you could display perhaps the first 30 words. With a “large” font size, perhaps the first 20 words instead for claritys sake.
So I wrote a script to detect the font size the visitor has set, to the pixel, and report it back again. It can handle Mozilla/Firefox Page Zooming as well as font-resizing. More details here if anyone is interested (especially in helping to test/refine it further):
69 Reader Comments
Back to the ArticleAaron Ansell
When in doubt, take a look at the source. The anchor tag has a background image of a dotted underline. The a:hover has switches that to an animated version. Quite a nice effect if a little extraneous.
Markus
I’ve seen solutions to this problem using IEs proprietary ‘expression’ extension to CSS. IE uses width: [removed]) and the rest of the world uses max-width. I think that’s a reasonable use of IEs expressions.
Vernon
A very good article. After I use the font size approach, the font appears in the same size in both IE 5.0 and Netscape most of time (I have tested so far). A problem on the Netscape 7.1 is that the percentage seems to be ignored sometimes. Font on one page is small, it may be bigger on the next page. How to work around this problem?
Here is my CSS code segment:
body {
…
font-family: Helvetica, Arial, san-serif;
font-size: 80%; /* IE 6.0 */
}
html>body {font-size: 80%;} /* Mozilla, Opera */
h3 {
font-size:1.2em;
text-align:center;}
.TitleText {
font-size:1em;
font-weight: bold;}
Adam Cimarosti
I’ve used this technique before actually reading this article.
this is another example of how it may be used:
ps: I know the “buttons” should have been list items, but didn’t have time – had to hand this stuff in minutes :P
chris tillam
I’m not a designer, just an amateur who got tired of comments like “It looks fair to horrible on my big monitor…” So I got around to making a liquid layout using percentages for dimensions and absolute positioning (in progress)
http://www-personal.usyd.edu.au/~ctillam/japanland/3puzzles/3puzzles.html
Then I found this article, and am now experimenting with ems as a layout and text dimension: great. So nice to see the container expand with the text. Just one thing…
On a mac, using IE5, I had my body style set at 100% and a div which wraps all the text set at 1.2em; within, there’s a nested div with a margin-top of 1em.
Guess what: blank screen. No text at all.
Then I scrolled down, and there was the text, about one-third of the scroll-bar’s travel downwards. A top-margin of 1em on the nested div translated into, at a guess, 1200 pixels.
NS6 and Mozilla render as styled.
This behaviour is consistent for font sizes greater than 1.13em and less than 1.25em.
One of life’s little mysteries.
IE6 Win and points
And while we’re on text-resizing capabilities: I happily accepted what you see written everywhere, including ALA, that Internet Explorer will resize text set in points. This is a miserable and misleading half-truth, as you too can find out for yourself if you investigate the settings at Tools/Internet Options/Accessibility.
Yes, IE6 will resize text set in points—if you tell it to ignore the incoming font-size; then it gives you its own five-step range. But if you tell it to honour the incoming font-size, you’ll see what “no-resize” really means.
Sigh.
: }
Lee
This was an extremely helpful arcticle. Thanks :D
Trenton
Go to agree with Lee, read the article, experimented with the ideas on my website and I like what I see! Cheers!
Marleen van den Brand
I just got my new laptop with a screen resolution of 1920×1200 pixels, one of those wiiiide screen things, websites with a table width 0f 100% are unreadable, i almost have to move my laptop from right to left over the table to read text (if i want to keep my head still), but i also can flip the screen (in windows xp you can for these tablet pc’s) than you get a really long and small website, I’m still figuring out what the is the best solution to make a website readable on both screens..
Richard Davey
I was glad that this article finally gave us a way to make the most of em’s without compromising too much, but one thing struck me as a result of it – as well as providing for a liquid/elastic design, what would you do if someone was browsing your site with a Page Zoom level set way high? Sure your text will flow, but sometimes it might be better to tailor the content based on the font size also.
For example if you’re showing the first X words of an article – at a “standard” font size you could display perhaps the first 30 words. With a “large” font size, perhaps the first 20 words instead for claritys sake.
So I wrote a script to detect the font size the visitor has set, to the pixel, and report it back again. It can handle Mozilla/Firefox Page Zooming as well as font-resizing. More details here if anyone is interested (especially in helping to test/refine it further):
http://www.launchcode.co.uk/fontheight/