Forum Moderators: not2easy
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;/* font sizing in ems; */
}
h1 {
font-size: 2.0em;
font-style: italic;
font-weight: normal;
}
etc
In the Google cache, or when translated by Google, Yahoo or Altavista, page fonts are very much larger for every table except the first one. It seems that the "76%" font-reduction is no longer in effect, except for the first one! What on earth is going on!
To recap, the page is laid out with tables:
.--------------------------
¦ top-table ............. ¦
¦ (this is fine) ........ ¦
.--------------------------
.-------- . ---------------
¦ Other. ¦ ¦ ............ ¦
¦ Tables ¦ ¦ ............ ¦
¦ (not). ¦ ¦ ............ ¦
¦ ...... ¦ ¦ ............ ¦
.-------- . ---------------The very top table has the correct (76%) font size, but all other tables do not. Does anybody know why this may be?
The page source does gets rewritten. eg:
Yahoo translation:(notice that there are now 2 <head>s. The problem is not due to that, however:
<head>
<title>Versión traducida de {page-url}</title>
</head>
<html><meta http-equiv="content-type" content="text/html; charset=UTF-8"><base href="{page-url}"><!doctype html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<!-- removed -->
<meta http-equiv="Content-Type" content="text/html ; CHARSET=UTF-8"><head>
<title>Conexant RH56D/SP-PCI 56k HCF DFS</title>
...
</head>
<body>
...
AltaVista translation:
<html><meta http-equiv="content-type" content="text/html; charset=UTF-8"><base href="{page-url}">
<!doctype html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<!-- removed -->
<meta http-equiv="Content-Type" content="text/html ; CHARSET=UTF-8"><head>
<title>Conexant RH56D/SP-PCI 56k HCF DFS</title>
...
</head>
<body>
...
I did 2 tests:
I suspect that the next question is more difficult: is there any means of adjusting the CSS so that the "76%" will transcend down to all fonts, wherever they are on the page, whether Standards-Mode or Quirks-Mode? After all, the top-table renders correctly, so it must be possible for the other tables, too.
[I asked myself "What is the difference between the top-table and all other tables?". Here is the answer]:
Top Table:
<body>
-> <table>
-> -> <tbody>
-> -> -> <tr>
-> -> -> -> <td>
-> -> -> -> -> <h1>
-> -> -> -> -> -> textOther Tables:
<body>
-> <table>
-> -> <tbody>
-> -> -> <tr>
-> -> -> -> <td>
-> -> -> -> -> <div>
-> -> -> -> -> -> <h1>
-> -> -> -> -> -> -> textSo, I guess the question becomes:
"How is it possible in Quirks mode to cause the Body->76% to transcend down through the CSS hierarchy past the <div> to reach other elements, yet not render incorrectly in Standards mode?"
It seems to me that this is the sort of question that separates the boys from the men. I am definitely a boy in this.
It turned out to be the treatment of <table> in Quirks mode, and nothing whatsoever to do with <div>.
After hours of reading various articles on the web, and using the DOM Inspector in Mozilla (Ctrl+Shift+i - what a great browser Mozilla is for developers and Webmasters), I was able to see that Moz added an extra stylesheet in Quirks (resource://gre/res/quirk.css) and that for tables this contained the line:
font-size: initial
Now, this is the declaration for the top-table:
table#Top {...and that font-size: 1.0em; allowed the top heading to keep the correct text sizes. None of the other <table>s had it. Naturally, they do now, and the page looks (mostly) OK when viewed in the translated versions or the Google cache in both Mozilla and Internet Explorer.
font-size: 1.0em;
margin: 0;
padding: 0;
}
Wow, only 2 years to fix! Many thanks for your assistance, encyclo.
