Solved

Resizable Fonts

Posted on 2004-04-04
32
1,208 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;
      }
0
Comment
Question by:wcameron
  • 12
  • 9
  • 7
  • +2
32 Comments
 
LVL 18

Expert Comment

by:bruno
Comment Utility
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/

0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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 :-)
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
>>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/
0
 
LVL 15

Expert Comment

by:Daydreams
Comment Utility
<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>
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
>>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
0
 
LVL 7

Expert Comment

by:TheKenman
Comment Utility
Hi wcameron,

Can you please tend to these abandoned questions:

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

Expert Comment

by:seanpowell
Comment Utility
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 :-)
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
Sean I am just dissapointed to hear you put layout and design above usability and accessability...  :-\
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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.)
0
 
LVL 15

Expert Comment

by:Daydreams
Comment Utility
Sean, bruno, thanks for your input; interesting discussion.
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
sean, all good points.

i do love his example here:

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


bruno
0
 
LVL 3

Author Comment

by:wcameron
Comment Utility
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.
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
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!
0
 
LVL 3

Author Comment

by:wcameron
Comment Utility
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;
   }
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
No.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
Sorry ward, been a long day :-)

In that case, the p will be 100% of the 80, not 100% of the 100...
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
<!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>
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
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
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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>
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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
0
 
LVL 7

Expert Comment

by:TheKenman
Comment Utility
    "...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 :)
0
 
LVL 3

Author Comment

by:wcameron
Comment Utility
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;
      }
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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>
0
 
LVL 3

Author Comment

by:wcameron
Comment Utility
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?
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
>> I'll do anything you say.
Pay my mortgage?

I'll be back later this evening...
0
 
LVL 3

Author Comment

by:wcameron
Comment Utility
Thanks Sean.
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
Comment Utility
Ward, you're almost there. Just a couple of small tweaks...

1. Don't set the font percentage on the body.
Since you're using tables for your layout (I'm not going to say anything about that :-) then just set it on the td, because everything is in a td...

2. This is the correct link order:
a:link
a:visited
a:hover
a:active

3. I've used % throughout because my brain intuitively knows what % means.

Here's the revised code:

<!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>MtnNature01</title>
<style type="text/css">

body,td                { color: #000; font-family: "MS Sans Serif", Geneva, sans-serif; }

td                     { font-size: 90%; }

a                      { color: #000; text-decoration: underline; }
a:visited              { color: #963; }
a:hover                { color: #963; text-decoration: underline; }
a:active               { color: #963; }

h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; }
h1, h2, h3, h4         { font-size: 140%; }
h5                     { font-size: 120%; }
h6                     { font-size: 100%; }

span.emphasis          { font-weight: bold; }
span.highlight         { background-color: #fc3; }

.menudark              { background: #630; color: #FCBE8B; border: none; vertical-align: top; font-weight: bold; }
.menudark a:link       { color:#FCBE8B; text-decoration: none; }
.menudark a:visited    { color:#630; text-decoration: none; }
.menudark a:hover      { text-decoration: underline; }
.menudark a:active     { color:#369; text-decoration: none; }

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

#header
      {
      float:left;
      width:100%;
      background:url("bg.gif") repeat-x bottom;
      font-size:60%;
      }

#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:none;
      }

#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;
      }

</style>
</head>

<body id="home">

<table border="2" cellpadding="3" cellspacing="0" width="756" bordercolor="#663300" height="950">
      <tr>
            <td valign="top" colspan="3" height="125" bgcolor="#663300">
            <!-- MSCellType="ContentHead" -->
            <table cellpadding="0" cellspacing="0" width="100%">
                  <tr>
                        <td bgcolor="#663300" width="605"><img border="0" src="../images/Banner1j.jpg" width="600" height="118"></td>
                        <td class="menudark">
                        Field Guides<br>
                        Travel Guides<br>
                        <a href="../Sightings">Your Sightings</a> <br>
                        Living with Wildlife<br>
                        Share Your Stories</td>
                  </tr>
            </table>
            </td>
      </tr>
      <tr>
            <td valign="top" colspan="3">
            <!-- MSCellType="ContentHead" -->
            <div id="header">
            <ul>
                  <li id="nav-home"><a href="../Home.htm">Home</a></li>
                  <li id="nav-landscape"><a href="../Geology">Landscape</a></li>
                  <li id="nav-plants"><a href="../Plants">Plants</a></li>
                  <li id="nav-wildlife"><a href="../Wildlife">Wildlife</a></li>
                  <li id="nav-birds"><a href="../Birds">Birds</a></li>
                  <li id="nav-dest"><a href="../Dest">Destinations</a></li>
                  <li id="nav-mynature"><a href="../Shop">My Nature</a></li>
                  <li id="nav-shop"><a href="../Shop">Images</a></li>
                  <li id="nav-shop"><a href="../Shop">Shop</a></li>
                  <li id="nav-search"><a href="../Search">Search</a></li>    
            </ul>
            </div>
            </td>
      </tr>
      <tr>
            <td valign="top" width="222" class="menulight">Normal<h1>Heading1</h1>
            <h2>Heading2</h2>
            <h3>Heading3</h3>
            <h4>Heading4</h4>
            <h5>Heading5</h5>
            <h6>Heading6</h6>
            </td>
            <td valign="top" width="290">
            <!-- MSCellType="ContentBody" -->
            &nbsp;
            </td>
            <td valign="top" width="216" height="723">
            <!-- MSCellType="NavBody2" -->
            &nbsp;
            </td>
      </tr>
      <tr>
            <td valign="top" colspan="3" height="89">
            <!-- MSCellType="ContentFoot" -->
            &nbsp;
            </td>
      </tr>
</table>

</body>
</html>

Thanks,
Sean
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
ooh, can i get my mortgage paid too?
0
 
LVL 3

Author Comment

by:wcameron
Comment Utility
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?
0
 
LVL 18

Expert Comment

by:bruno
Comment Utility
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?
0
 
LVL 3

Author Comment

by:wcameron
Comment Utility
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.
0
 
LVL 31

Expert Comment

by:seanpowell
Comment Utility
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 :-)
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now