We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Resizable Fonts

wcameron
wcameron asked
on
Medium Priority
1,299 Views
Last Modified: 2013-12-03
For some reason, some of my styles resize based upon the viewer setting the font size preferences in Internet Explorer or Mozilla. Other fonts seem unaffected by the selections made by the user.

Here is my css:

a:link       { color: #000000 }
.main        { font-family: Arial; font-size: 10pt; margin-bottom: 16px }
.menu        { color: #663300; font-family: Arial, Helvetica, sans-serif; letter-spacing:
               -0.03em; font-size: x-small; text-decoration: none }
:hover.menu  { color: #663300; text-decoration: underline }
a:visited    { color: #663300 }
a:active     { color: #663300 }
body         { font-family: Arial; font-size: 12px }
table
{
      table-border-color-light: rgb(255,153,51);
      table-border-color-dark: rgb(0,0,0);
}
h1, h2, h3, h4, h5, h6
{
      font-family: Book Antiqua, Times New Roman, Times;
}
h1           { font-size: 14pt; font-family: Arial; font-weight: bold }
h2           { color: #666600; font-size: 12pt; font-family:Arial }
h3           { font-family: Arial; font-size: 10pt; font-weight: bold }
h4           { color: #663300; font-size: 10pt; font-family: Arial; font-weight: bold }
h5
{
      color: rgb(204,51,51);
}
h6
{
      color: rgb(102,0,102);
}

.menunew {background-color:Hex={FF,CC,99}; color:#003366;font-size=15px}
.menunew a:link {color:#000000;text-decoration: none;}
.menunew a:visited {color:#003366;text-decoration: none;}
.menunew a:active {color:#336699;text-decoration: none;}
.menunew a:hover {color:#000000;text-decoration: underline;}

.menu {color:#003366;font-size=15px}
.menu a:link {color:#000000;text-decoration: none;}
.menu a:visited {color:#003366;text-decoration: none;}
.menu a:active {color:#336699;text-decoration: none;}
.menu a:hover {color:#000000;text-decoration: underline;}

 #header {
      float:left;
      width:100%;
      background:url("bg.gif") repeat-x bottom;
      font-size:60%;
      line-height:normal;            
            font-family: "MS Sans Serif", Geneva, sans-serif;
      }
    #header ul {
      margin:0;
      padding:5px 0px 0;
      list-style:none;
      }
    #header li {
      float:left;
      background:url("left_both.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
            white-space: nowrap;
      }
    #header a {
      float:left;
      display:block;
      width:.1em;
      background:url("right_both.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#614B26;
      }
    #header > ul a {width:auto;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a {float:none;}
    /* End IE5-Mac hack */
    #header a:hover {
      color:#614B26;
            text-decoration: underline;
      }
    #home #nav-home, #landscape #nav-landscape, #plants #nav-plants,
    #wildlife #nav-wildlife, #birds #nav-birds,
    #dest #nav-dest, #shop #nav-shop, #search #nav-search {
      background-position:0 -150px;
      border-width:0;
      }
    #home #nav-home a, #landscape #nav-landscape a, #plants #nav-plants a,
    #wildlife #nav-wildlife a, #birds #nav-birds a,
    #dest #nav-dest a, #shop #nav-shop a, #search #nav-search a {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#614B26;
      }
    #header li:hover, #header li:hover a {
      background-position:0% -150px;
      color:#333;
      }
    #header li:hover a {
      background-position:100% -150px;
      }
Comment
Watch Question

Commented:
you have some fonts set as relative fonts, and some as absolute.

points are relative - they will resize based on user prefs

pixels are absolute - they will not resize based on users prefs.


also, some of your CSS is just wrong, you have a few "=" signs in there...just wanted to let you know.
example:  .menunew {background-color:Hex={FF,CC,99}; color:#003366;font-size=15px}

a couple of articles that might interest:

http://www.alistapart.com/articles/sizematters/
http://www.alistapart.com/articles/elastic/

Top Expert 2004

Commented:
Just a correction...

>>points are relative - they will resize based on user prefs
Points are absolute actually, and won't resize. But only use them for printed media, not for the screen. If you need a fized-size font, use pixels.

Regarding font resizing:

Some users have their preferences set differently than the IE medium equivalent.
If you need part of your layout to be consistent, use pixels. For areas where a larger font won't break the layout, then feel free to use em's or %. Just be careful about the cascade:

body, td, p { font-size:80%; }

This means a p tag in a table will be 80% of 80% of 80% - just be careful :-)

Commented:
>>If you need part of your layout to be consistent, use pixels. For areas where a larger font won't break the layout, then feel free to use em's or %.


ouch.


please, for the sake of your audience, design your pages so that they CAN have the fonts enlarged without breaking your layout - read the elastic design article i posted above.
http://www.alistapart.com/articles/elastic/
CERTIFIED EXPERT

Commented:
<slightly off-topic>

In the article:
http://www.alistapart.com/articles/elastic/
it says:

"...Mozilla and Opera will scale text that is set using pixels, IE Windows will not."

So which is static size and which can be scaled?

</slightly off-topic>

Commented:
>>So which is static size and which can be scaled?


??  It is saying that while IE will now allow text set in pixels to change size based on user prefs, Moz and Opera will...


bruno
Hi wcameron,

Can you please tend to these abandoned questions:

02/16/04 https://www.experts-exchange.com/Q_20887196.html "creating loan calculation"
12/14/03 https://www.experts-exchange.com/Q_20825384.html "Using Session Variable with Database Res..."
10/13/03 https://www.experts-exchange.com/Q_20765754.html "Enabling Multiple Select with Database Q..."
Top Expert 2004

Commented:
LOL - yes, IE is the only browser that won't resize :-)

A matter of preference I guess - but many people try and use resizable fonts in a layout not designed for them. (Like putting a word in a 50 pixel cell.) If your layout is entirely CSS based, fully "elastic", and there's not a single width anywhere that uses pixels, then it's not an issue. For the other 99% of layouts there that will break, then keep them a static size - at least for IE :-)

Commented:
Sean I am just dissapointed to hear you put layout and design above usability and accessability...  :-\
Top Expert 2004

Commented:
Just being pragmatic I guess :-)

How many times have you seen this:

td { font-size:100%; }

<table>
  <tr>
    <td width="50">Company</td>
  </tr>
</table>

I just think it would be remiss of me if I didn't point out some of the issues with these so-called "elastic" layouts. There are a lot of people that start creating CSS layouts and end up with a disaster on their hands. (I had 2 clients in the last 30 days that had fired their web designers for exactly that reason.) Before, the web site worked and everyone could read it AND use it. Now, the entire site was completely based on the latest standards, but fell apart in anything other than IE6, which is what the designer used. Many of them fail to even test on multiple browsers - which from a "usability" perspective is far more important. (Some navigation system's fail completely on Opera and Mozilla simply because the script uses document.all or some other silliness.)

From the article you cited:

>>Jeffrey Zeldman has argued in the past that pixels, while problematic, are a better unit than ems to specify the size of text.
Personally I think this guy is only right about 60% of the time - but that's quite a bit more often than a lot of the other stuff I read by so-called CSS guru's :-)
The reason for this statement is that inevitably the designer has jumped so quickly onto the resizable text bandwagon that they've completely forgotten about the resizable layout bandwagon riding behind them.

>>Many designers now employ the pixel as a unit of defining text size, not for absolute pixel-perfect control over the look of their web pages, but because there appears to be no sensible alternative.
Correct again. The browser manufacturers decided - using my table example above - that they would increase the text size "but not the table". How much sense does that make? If someone spec's a table at 50 pixels, and a font at 50 pixels, why just resize the text? If you want to talk about "elasticity" then resize everything. The page would require scrolling, but it would "still" be usable. It is the arbitrary rendering engines that are causing many of our problems today - not someone saying 13px. Another citation from that article to second that motion:
>>CSS has a solution for this: the max-width property, which could be used to specify a maximum width for an element. Unfortunately (who would have thought?) Internet Explorer doesn’t support it.

So, yes, I'm all for true accessibility and usability, but it relies on a complete rethinking of how we are designing layouts, graphics and cross-media content. It's more than just saying "don't use pixels for your fonts" :-)

Sorry for the diatribe - time for more Java. (The drinkable kind, that is.)
CERTIFIED EXPERT

Commented:
Sean, bruno, thanks for your input; interesting discussion.

Commented:
sean, all good points.

i do love his example here:

http://www.csszengarden.com/?cssfile=/063/063.css&page=0


bruno

Author

Commented:
Thanks all for your help.

Kenman, the questions weren't abandoned, they either were solved by myself (as listed in the comments) or nobody offered a solution that worked. I've posted a question asking that they be closed.

I'll work through the suggested articles to see if I can work out the solution.

Commented:
you don't need to work through the article for a solution.

if you want the text resizable by the user, simpy don't set the text in points or pixels - you will have to use percentages or ems, but as warned before, watch out for the cascade!

Author

Commented:
To try to understand the dynamic sizing, will the following avoid nesting and inheritance problems?

body {
   font-size: 80%;
   }

h1 {
   font-size: 2em;
   }

p {
   font-size: 1em;
   }
Top Expert 2004

Commented:
No.
Top Expert 2004

Commented:
Sorry ward, been a long day :-)

In that case, the p will be 100% of the 80, not 100% of the 100...
Top Expert 2004

Commented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

body {
   font-size: 80%;
   }
h1 {
   font-size: 2em;
   }
p {
   font-size: 1.2em;
   }
</style>
</head>
<body>
This text will be at 80% of the user's normal reading preference.
<p>This text will be at 100% of the user's normal reading preference.</p>
<h1>This will be at 200%</h1>
</body>
</html>

Commented:
sean's example should explain it for you.

just want to throw in that because of a bug in IE, you DO want to set the BODY style using %, not EM.


bruno
Top Expert 2004

Commented:
Another one for my long list... thanks bruno, I didn't know that  - it's a strange one for sure.

There goes another night without sleep :-(

<html>
<head>
<style type="text/css">
body { font-size: 1em; }
</style>
</head>
<body>
BIG BUG - watch out!
<span style="font-size: 100%;">happiness is a warm puppy</span><br />
<p style="font-size: .8em;">happiness is a warm puppy</p>
</body>
</html>

<html>
<head>
<style type="text/css">
body { font-size: 100%; }
</style>
</head>
<body>
NO BUG - watch out anyways...one never knows...
<span style="font-size: 100%;">happiness is a warm puppy</span><br />
<p style="font-size: .8em;">happiness is a warm puppy</p>
</body>
</html>
Top Expert 2004

Commented:
Sorry Ward - we've been going off on a little tangent again...

Bruno's first post pretty much nailed it, the rest has just been adding the right amount of sugar to get the medicine to go down :-)
http:Q_20943247.html#10754323
    "...the questions weren't abandoned, they either were solved by myself (as listed in the comments) or nobody offered a solution that worked."

Sorry wcameron, but that is a common mistake. Technically a question is considered abandoned 21 days after the last comment is made. I just wanted to make sure you were aware of those before I tried to help, because I've found myself wasting more and more time on questions that end up never getting answered....kinda sucks.

     "I've posted a question asking that they be closed."

Good deal, thanks!

And it looks like you're in pretty good hands here- I'll be on my way :)

Author

Commented:
So close. I've worked out a style sheet that allows me to create a variety of classes, all of which resize based upon the users preference. You can view an example at:
http://www.mountainnature.com/_templates/MountainNature01.htm

For some reason though, working in FrontPage 2003, the fonts are larger in design mode than they will appear when viewed in a browser. I'm wondering where I went wrong. Here is my css:

BODY, TD {
      color: Black;
      font-family: "MS Sans Serif", Geneva, sans-serif;
      font-size: 90%;
      text-align: left;
      }

A { color: Black;text-decoration: underline;}
A:HOVER { color: #996633;text-decoration: underline; }
A:VISITED { color: #996633; }
A:ACTIVE { color: #996633; }

h1, h2, h3, h4, h5, h6
{      font-family: Arial, Helvetica, sans-serif; }
h1           { font-size: 1.4em;  }
h2           { font-size: 1.4em; }
h3           { font-size: 1.4em;   }
h4           { font-size: 1.4em;  }
h5           { font-size: 1.2em;  }
h6           { font-size: 1.0em;  }

span.emphasis { font-weight: bold; }

span.highlight { background-color: #FFCC33; }

.menudark {background: #663300;color: #FCBE8B;  vertical-align: top;  font-size: 1.0em;  font-weight: bold;  }
.menudark a:link {color:#FCBE8B;text-decoration: none;}
.menudark a:visited {color:#663300;text-decoration: none;}
.menudark a:active {color:#336699;text-decoration: none;}
.menudark a:hover {text-decoration: underline;}

h1.menulight {color:#000000;}
.menulight {background:#DAD593; color: #000000; vertical-align: top;}
.menulight a:link {text-decoration: none;}
.menulight a:visited {color:#663300;text-decoration: none;}
.menulight a:active {color:#663300;text-decoration: none;}
.menulight a:hover {color:#000000;text-decoration: underline;}

 #header {
      float:left;
      width:100%;
      background:url("bg.gif") repeat-x bottom;
      font-size:60%;
      line-height:normal;            
            font-family: "MS Sans Serif", Geneva, sans-serif;
      }
    #header ul {
      margin:0;
      padding:5px 0px 0;
      list-style:none;
      }
    #header li {
      float:left;
      background:url("left_both.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
            white-space: nowrap;
      }
    #header a {
      float:left;
      display:block;
      width:.1em;
      background:url("right_both.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#614B26;
      }
    #header > ul a {width:auto;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a {float:none;}
    /* End IE5-Mac hack */
    #header a:hover {
      color:#614B26;
            text-decoration: underline;
      }
    #home #nav-home, #landscape #nav-landscape, #plants #nav-plants,
    #wildlife #nav-wildlife, #birds #nav-birds,
    #dest #nav-dest, #shop #nav-shop, #search #nav-search {
      background-position:0 -150px;
      border-width:0;
      }
    #home #nav-home a, #landscape #nav-landscape a, #plants #nav-plants a,
    #wildlife #nav-wildlife a, #birds #nav-birds a,
    #dest #nav-dest a, #shop #nav-shop a, #search #nav-search a {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#614B26;
      }
    #header li:hover, #header li:hover a {
      background-position:0% -150px;
      color:#333;
      }
    #header li:hover a {
      background-position:100% -150px;
      }
Top Expert 2004

Commented:
You're not really doing anything wrong - FP is just having difficulty with the CSS in design mode which is really only meant to estimate.
It will never be as precise as the browsers rendering engine...

It's also partly because of the cascade youre using:

body      { font-size: 90%; font-family: "ms sans serif", geneva, sans-serif; }
td         { font-size: 90%; font-family: "ms sans serif", geneva, sans-serif; }
h2        { font-size: 1.4em; }

In effect, this means that an H2 tag in a table is: 1.4 times 90% of 90% of 100%. Even I'm getting confused :-)

Even this simple code will show the problem in design mode with different renditions of the H1 tag:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<style type="text/css">

body      { font-size: 90%; font-family: "ms sans serif", geneva, sans-serif; }

td        { font-size: 90%; font-family: "ms sans serif", geneva, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-family: arial, helvetica, sans-serif; }

h1        { font-size: 1.4em; }
h2        { font-size: 1.4em; }
h3        { font-size: 1.4em; }
h4        { font-size: 1.4em; }
h5        { font-size: 1.2em; }
h6        { font-size: 1em; }

.menudark { font-weight: bold; font-size: 1em; }


</style>
</head>

<body>

<table>
      <tr>
            <td>
            <h1>First H1 Text element</h1>
            <table>
                  <tr>
                        <td class="menudark">
                        <h1>First H1 Text element</h1>
                        Field Guides<br>
                        Travel Guides<br>
                        <a href="#">Your Sightings</a> <br>
                        Living with Wildlife<br>
                        Share Your Stories</td>
                  </tr>
            </table></td>
      </tr>
      <tr>
            <td>
            Normal
            <h1>Heading1</h1>
            <h2>Heading2</h2>
            <h3>Heading3</h3>
            <h4>Heading4</h4>
            <h5>Heading5</h5>
            <h6>Heading6</h6>
       </td>
      </tr>
</table>
</body>
</html>

Author

Commented:
Aaagh, just when I thought I was getting closer. Who thought up this cascading stuff anyway?

I give up. I'll do anything you say. How can I specify the various font sizes (so they can be resized using the browser), but so they don't get confused by the cascade?
Top Expert 2004

Commented:
>> I'll do anything you say.
Pay my mortgage?

I'll be back later this evening...

Author

Commented:
Thanks Sean.
Top Expert 2004
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Commented:
ooh, can i get my mortgage paid too?

Author

Commented:
First of all, I think I love you (LOL). This style sheet seems to work much better.

I hear you about tables. They are difficult to format (at least consistently). They make it difficult to update your pages later. The only thing more difficult than working with tables is css!

I would love to look at a new way of formating my pages. Can you suggest some primers? For css to gain the wide acceptance that it wants, it needs tools (ie FrontPage, DreamWeaver) that begin with the standards and help you move to the next level.

My other project, www.FrontPageMagic.com is designed to help steer budding developers in the right direction. I'm currently top 10 on Experts Exchange for FrontPage and each new challenge helps me learn new ways that I need to focus my resources.

Where should I start?

Commented:
looks like you've got a good start...
http://www.frontpagemagic.com/Design/CSS/TopStyle.htm

a good tool is a good place to start, certainly.  

there are tons of articles on the web about CSS, one of our resident experts dorward even has a page with some tutorials (which actually came up #1 in a google search for me earlier tonight! - nice job dorward)

how would you currently rate your CSS knowledge?

Author

Commented:
Thanks, I'm beginning to get a handle on some of the fundamentals, but as I've demonstrated, understanding the cascading character of css is very difficult (not to mention cross-browser challenges). I hate to say it but life was easier when there was no alternative to MS (OK, I'm taking 50 lashes philosophically).

I have checked out a few of the tutorials recommended earlier in this post adn many of them make sense, but they begin from a huge expecation of previous knowledge.

If someone will help me understand the fundamentals, I can take those to a huge FrontPage audience. I excel at taking technical topics and making them accessible. The hard part is getting them accessible to me (tee hee).

I've increased the points so to 500 because I have really pushed you on this one. I  don't mind starting another thread if you feel I should. Just let me know.
Top Expert 2004

Commented:
Is there a question there :-)

Actually I'd close this one down Ward, as we need to keep these posts to a single question if possible. It mkaes it easier for someone to search in the future...
As to understanding the fundamentals, as bruno said - just start reading, experimenting, trying things out. It takes time, but it's inevitable.
The only thing that you must have is a good browser pool on your machine; NS 6 and 7, Mozilla, Firebird, Opera, and IE 5, 5.5, and 6 would be a good start.
And think flexible. Web design is not about buildng brick walls :-)
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.