f



Making It Worse 8<<<

   In my personal history website I'm running each code page through the 
validator (with slow success), but in doing so I've seriously caused 
regressions.  First, the basic font size has dropped down to default (I 
want 120%).  Second, the layout of the table is messed up: the image and 
caption are floated left, whereas I want both to be centered.
   When I was use non-valid code (e.g. <figure>, <figcaption>, <center> 
and such it was fine.  Switching to valid code has made it look awful, 
and whatever mods I try either have no effect or make it worse.  Please 
advise.  (Apologies for all the "personal stuff...) TIA

[Code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-
type">
    <title>Mike's Youth</title>
    <style>
    	body     { margin: 0 75px 0 75px; 
	           font: Verdana; font-size: 120%; color: White; 
		 }
      p          { text-indent: 20px; font-size: 120%;  margin-right: 
10px; margin-left: 10px;}
     .center     { text-align: center; }
     .yel        { color: yellow; font-weight: bold; }
     .red        { color: red;    font-weight: bold; }
      a:link     { color: orange;     }
      a:visited  { color: LightGreen; }
      a:hover    { color: Gold;       }
      a:active   { color: Gray;       }	
      .text      { width: 65%; }
      h3         { text-align: center; }
      td.image   { float: auto; margin: 0.5em; padding: 0.5em; }
      td.image p { font-size: large; text-align: center; }
    </style>
  </head>
  <body background="blue11.jpg">
  <div>
    <h3 class="center"><a id="MRC_Youth">Mike's Youth</a></h3>
    <table><tr><td>
      <p><span class="yel"><b>Michael Richard Copeland</b></span> (Mike) 
grew up on the North Shore of Chicago.&nbsp;&nbsp;
      He and his 2 sisters, <span class="yel"><b>Maureen</b></span> (18 
months younger) and <span class="yel"><b>Claudia</b></span> (6 years 
younger) were children of <span class="yel"><b>Maurice Donald Copeland
</b></span> and <span class="yel"><b>Elizabeth Kittle Copeland</b>
</span>.&nbsp;&nbsp;
      Mike was born in <span class="yel"><b>Evanston, Illinois</b>
</span>, a suburb north of Chicago, in 1940.
      <p>Their father was a well-known local radio actor, and their 
mother was a stay-at-home mother.
      <p>After Maureen was born, the family lived in a north side 
Chicago apartment for a few years before moving to <span class="yel"><b>
Winnetka</b></span>, another northern Chicago suburb along <span 
class="yel"><b>Lake Michigan</b></span>.&nbsp;&nbsp;Claudia was born 
there.
  <table border="1">
    <tr>
      <td class="text">
        <p>A nearly tragic incident occurred while they lived in 
Winnetka.&nbsp;&nbsp;
           At age 8, Mike was put into a local "summer day camp" that 
was held at the beach.&nbsp;&nbsp;
           The idea was, of course, to keep him busy and to learn some 
physical and social skills.&nbsp;&nbsp;
       	   Many activities involved water sports and games.&nbsp;
&nbsp;
           <span class="red">Mike didn't know how to swim</span>.&nbsp;
&nbsp;
	   One day he was "horsing around" with one of the counselors out 
on a long pier.&nbsp;
     	   The counselor got annoyed, picked Mike up, and dropped him over 
the edge...into deep water.&nbsp;&nbsp;
	   Mike remembers going down once or twice, as he tried to 
float...but he couldn't swim at all.&nbsp;&nbsp;
     	   One of the City's <a href="LifeSavers.htm#Vinnie">life guards
</a> dove in and rescued Mike.&nbsp;&nbsp;
           He has never forgotten the incident.
       	   <p>Wisely, Mike's father took him down to the beach the 
next day, making him "face his demon" by getting into the water.&nbsp;
&nbsp;
	   (Mike remembers this, too.)&nbsp;&nbsp;
  	   His parents soon enrolled him in a formal swim class that was 
held at the local high school, to guard against a tragedy like this 
happened again.&nbsp;&nbsp;
	   (Oddly, Mike's mother, who grew up in Chicago and lived 
virtually her entire life along Lake Michigan, never learned to swim - 
perhaps explaining why Mike and Maureen didn't learn that skill early 
on.)
       </td>
       <td class-"image center">
        <img alt="1523Edgewood02.jpg" src="1523Edgewood02.jpg" 
height="316" width="288" />
  	<br>The Copeland's Winnetka house
	</td>
      </tr>
    </table>
    <hr>
   </div>
</body></html>

---
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

0
Mike
9/9/2016 9:54:47 PM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

9 Replies
147 Views

Similar Articles

[PageSpeed] 16

In article <MPG.323cdd97cce3c8e49896d2@news.eternal-september.org>,
 Mike Copeland <mrc2323@cox.net> wrote:

>    In my personal history website I'm running each code page through the 
> validator (with slow success), but in doing so I've seriously caused 
> regressions.  First, the basic font size has

Which validator, some validtaor type facilities like Tidy can change 
things (hence the name), others like web developer extensions on say 
Firefox don't, they just give analysis.

-- 
dorayme
0
dorayme
9/9/2016 11:54:16 PM
In article <do_ray_me-E81785.09541610092016@46.sub-75-242-
165.myvzw.com>, do_ray_me@bigpond.com says...
> 
> >    In my personal history website I'm running each code page through the 
> > validator (with slow success), but in doing so I've seriously caused 
> > regressions.  First, the basic font size has
> 
> Which validator, some validtaor type facilities like Tidy can change 
> things (hence the name), others like web developer extensions on say 
> Firefox don't, they just give analysis.

   It is: https://validator.w3.org/

   BTW, I got a wonderful reply some Robert Stanley, who, among many 
style thoughts, pointed out that I had "class-" instead of "class=".  
Changing that solved most of my problems - and left me with a host of 
style issues to consider.  8<}}

---
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

0
Mike
9/10/2016 1:45:41 AM
[X-Post & F'up2 comp.infosystems.www.authoring.misc]

Mike Copeland wrote:

>    In my personal history website I'm running each code page through the
> validator (with slow success), but in doing so I've seriously caused
> regressions.  First, the basic font size has dropped down to default (I
> want 120%).  Second, the layout of the table is messed up: the image and
> caption are floated left, whereas I want both to be centered.

In the code that you posted, there is a hyphen-minus after “class” where 
there should be an equals character (“=”) to separate the “class” attribute 
name from the attribute value.  As a result, this markup is not Valid and 
the W3C Markup Validator will tell you this.

>    When I was use non-valid code (e.g. <figure>, <figcaption>, <center>
> and such it was fine.

<figure>, <figcaption>, and <center> are not per se non-valid markup.  It 
depends on the markup language, in particular the language version here.  

The “figure” and “figcaption” elements are only specified in HTML5 and 
later, and you have declared HTML 4.01.

<https://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html>
<https://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-figure-element>
	
The “center” element is deprecated in HTML 4.01, and obsolete and non-
conforming (i.e. forbidden) in HTML5, but since you declared HTML 4.01 
*Transitional*, it is Valid.

<https://www.w3.org/TR/1999/REC-html401-19991224/present/graphics.html#edef-CENTER>
<https://www.w3.org/TR/2014/REC-html5-20141028/obsolete.html#non-conforming-features>

Not Valid in HTML 4.01 Transitional, but Valid in HTML5, is a “style” 
element without a “type” attribute as you wrote.  In HTML 4.01 you have to 
declare the stylesheet language as there was no default; usually, that was 
type="text/css", which is the default as of HTML5 (but you can still specify 
it for backwards compatibility).

<https://www.w3.org/TR/1999/REC-html401-19991224/present/styles.html#edef-STYLE>

vs.

<https://www.w3.org/TR/html5/document-metadata.html#attr-style-type>

You should declare HTML5 by writing

<!DOCTYPE html>

instead, then run the code through the W3C Markup Validator again.  The Web 
site will switch to the HTML5 (nu)Validator then, which gives you more 
information.

If that does not help, you should post again the original and the so-far-
corrected markup and stylesheet(s) in 
<news:comp.infosystems.www.authoring.misc>, unless you are sure that the 
problem is only HTML-related (in which case it belongs in 
<news:comp.infosystems.www.authoring.html>) or stylesheet-related (in which 
case it belongs in <news:comp.infosystems.www.authoring.stylesheets>).

> […]
> [Code]
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
> <html>
>   <head>
>     <meta content="text/html; charset=ISO-8859-1" http-equiv="content-> type">

Usually you would write the attributes in the reverse order, as in the HTTP 
response header field

Content-Type: text/html; charset=ISO-8859-1

(hence “http-equiv[alent]”), but either order is Valid *HTML 4.01*.  Neither 
order is Valid HTML5.

<https://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#edef-META>

> […]
>     <style>
>     body     { margin: 0 75px 0 75px;
> font: Verdana; font-size: 120%; color: White;
> }
>       p          { text-indent: 20px; font-size: 120%;  margin-right:
> 10px; margin-left: 10px;}

This will make the font-size of ”p” elements 1.2 times the font-size of the 
next ancestor element that has the “font-size” property declared on it, or 
of the default font-size.  For example, if you declare “font-size: 120%” or 
“font-size: 1.2em” on the “body” element, and then again “font-size: 120%” 
or “font-size: 1.2em” on “p” elements, and a “p” element is a child element 
of the “body” element, then the effective font-size of that “p” element is 
1.44rem (1.44 times the base/“root” font-size).

>   <body background="blue11.jpg">

Declare the “background-image” property on the “body” element instead.

>   <div>
>     <h3 class="center"><a id="MRC_Youth">Mike's Youth</a></h3>

Do you want all headings to be horizontally centered?  If yes, do not use 
the “center” class on each heading, but element type selectors for the 
headings (“h1” through “h6”).  Such bootstrap declarations are the exception 
to the rule of thumb of avoiding element type selectors.

Regardless, this can be simplified to

  <h3 … id="MRC_Youth">Mike's Youth</h3>

You can specify the “id” attribute on virtually any element.  The “a” 
element was necessary in HTML 4.01 and earlier versions because there were 
user agents that supported only HTML ≤ 4.01 and did not support anchors by 
ID; so you would specify on an “a” element both the “id” and the “name” 
attribute (or only the “name” attribute) with the same value.

>     <table><tr><td>

Please do not use tables for this.

>        <td class-"image center">
------------------^

> ---
> This email has been checked for viruses […]

Would you *please* stop posting this nonsense?


PointedEars
-- 
Sometimes, what you learn is wrong. If those wrong ideas are close to the 
root of the knowledge tree you build on a particular subject, pruning the 
bad branches can sometimes cause the whole tree to collapse.
  -- Mike Duffy in cljs, <news:Xns9FB6521286DB8invalidcom@94.75.214.39>
0
Thomas
9/10/2016 2:19:05 AM
In article <MPG.323d13acf2bcd36e9896d3@news.eternal-september.org>,
 Mike Copeland <mrc2323@cox.net> wrote:

> In article <do_ray_me-E81785.09541610092016@46.sub-75-242-
> 165.myvzw.com>, do_ray_me@bigpond.com says...
> > 
> > >    In my personal history website I'm running each code page through the 
> > > validator (with slow success), but in doing so I've seriously caused 
> > > regressions.  First, the basic font size has
> > 
> > Which validator, some validtaor type facilities like Tidy can change 
> > things (hence the name), others like web developer extensions on say 
> > Firefox don't, they just give analysis.
> 
>    It is: https://validator.w3.org/

Perhaps you are saying that by your following recommendations from 
this site, unwanted and surprising changes have happened to your web 
pages.

-- 
dorayme
0
dorayme
9/10/2016 2:46:41 AM
On Fri, 9 Sep 2016 14:54:47 -0700, Mike Copeland wrote:
>  First, the basic font size has dropped down to default (I 
> want 120%). 

With all respect, what you want is not important -- unless you're 
writing for yourself alone, and don't want anyone else to read it. 

Most of us write Web pages because we want people to read them. It's 
Unnecessary to override the browser settings of visitors to our 
pages: the reader has already got the browser configured to his or 
her liking. Worse, changing font size may make your page unreadable, 
when considered in combination with other settings.

Lots of bad Web sites make fonts too big or too small. Why go out of 
your way, even a little bit, to be one of them?

-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
9/13/2016 6:17:48 PM
13.9.2016, 21:17, Stan Brown wrote:

> On Fri, 9 Sep 2016 14:54:47 -0700, Mike Copeland wrote:
>>  First, the basic font size has dropped down to default (I
>> want 120%).
>
> With all respect, what you want is not important -- unless you're
> writing for yourself alone, and don't want anyone else to read it.

Well, yes, but Mike seems to complain about the declaration for 
font-size not getting inherited into tables. That�s a reasonable 
complaint, but the page seems to have a nonstandard doctype declaration, 
HTML 4.01 Transitional without a URL, which is known to trigger �quirks 
mode�, where browsers emulate very old browsers that incorrectly did not 
inherit font size into tables.

(I can imagine a few cases where I might use font-size: 120% for body. 
But those are rare exceptions. Anyway, that size *should*, by CSS specs, 
be inherited by all children of body that have no font size setting of 
their own, so it�s a fair complaint. But invoking quirks mode means that 
all bets are off.)

> Lots of bad Web sites make fonts too big or too small. Why go out of
> your way, even a little bit, to be one of them?

I have some sympathy for designers that set font size to less than 100% 
due to setting font family to e.g. Verdana. I don�t get the point in 
this case where the size is set to larger than default for Verdana. 
Anyway, it is one of the crucial faults of CSS that you cannot bind font 
size and font family settings together. CSS is a bit too �atomic�, so to 
say.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
9/13/2016 6:59:48 PM
In article <nr9ib0$gkd$1@dont-email.me>, jkorpela@cs.tut.fi says...
> 
> Well, yes, but Mike seems to complain about the declaration for 
> font-size not getting inherited into tables. That?s a reasonable 
> complaint, but the page seems to have a nonstandard doctype declaration, 
> HTML 4.01 Transitional without a URL, which is known to trigger ?quirks 
> mode?, where browsers emulate very old browsers that incorrectly did not 
> inherit font size into tables.
> 
> (I can imagine a few cases where I might use font-size: 120% for body. 
> But those are rare exceptions. Anyway, that size *should*, by CSS specs, 
> be inherited by all children of body that have no font size setting of 
> their own, so it?s a fair complaint. But invoking quirks mode means that 
> all bets are off.)

   Fair points.  Howitzer, with respect to the DOCTYPE, I can't seem to 
find what's the generally accepted "best" value(s).  Google evokes 
confusion (for me), and I've gotten differing recommendations from here 
and there.  Given that I respect your experience and wisdom, what do 
_you_ suggest?
   I'm also unsure as to what font family to specify.  I'd appreciate 
your thoughts on this, as well.  TIA

---
This email has been checked for viruses by Avast antivirus software.
https://www.avast.com/antivirus

0
Mike
9/14/2016 8:26:42 PM
14.9.2016, 23:26, Mike Copeland wrote:

 > [...] with respect to the DOCTYPE, I can't seem to
> find what's the generally accepted "best" value(s).

There are two uses for DOCTYPEs: for triggering suitable browser mode 
(standard, almost standard, quirks), and for markup validation. For the 
first use, in order to trigger quirks mode, the simplest solution is 
<!DOCTYPE html> (because it is short and the risk of mistyping it is 
minimal). But if you do markup validation, too, then you should use a 
DOCTYPE that best corresponds to the definition of HTML that you try to 
adhere to.

The sample code in the initial message of this thread has

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

which seems to correspond to the markup used (though there are some 
markup errors). However, this DOCTYPE is not standards-conforming, and 
it triggers quirks mode. To conform to the specification, and to cause 
standards mode, the DOCTYPE must be exactly as in the HTML 4.01 spec, 
with a URL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

>    I'm also unsure as to what font family to specify.  I'd appreciate
> your thoughts on this, as well.  TIA

It’s a broad question and depends on the nature of the page. It also 
involves personal opinions. Verdana (which is used in the sample you 
posted) isn’t my favorite, especially as a copy text font in normal or 
larger size, but it’s tolerable. But if you don’t know which font to 
use, then

font-family: sans-serif;

is a simple option, asking each browser to use its default sans serif 
font. And the only reason for using even that, as opposite to not 
defining fonts at all, is that by default most browsers use Times New 
Roman or a similar serif font – which is not bad at all as such, but 
often not suitable for on-screen use (as opposite to print, which is 
what it was designed for).

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
9/15/2016 11:45:21 AM
On 15/09/2016 14:45, Jukka K. Korpela wrote:
> ... For the
> first use, in order to trigger quirks mode, the simplest solution is
> <!DOCTYPE html>...

s/quirks/standard

-- 
Best wishes, Osmo
0
Osmo
9/15/2016 2:03:59 PM
Reply: