Font sizes of web page are too small when a page is viewed in Mozilla

RESOLVED INVALID

Status

SeaMonkey
General
RESOLVED INVALID
14 years ago
14 years ago

People

(Reporter: chalcrow, Unassigned)

Tracking

Trunk
x86
Windows XP

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

14 years ago
User-Agent:       
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6) Gecko/20040113

I have created a number of pages that look fine when viewed in Internet 
Explorer 6, however when viewed in Mozilla the fonts become very small, and in 
some cases barely legible.  The font sizes are controlled by a style sheet 
using 'em' units.  All of the pages validate as XHTML 1.0, using the following 
DOCTYPE declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note - the <?xml version="1.0"?> instruction is present at the start of all 
pages, just before the DOCTYPE declaration.  If I remove the DOCTYPE 
declaration, the pages display in Mozilla as intended.  Is this a bug in 
Mozilla or is there something I am missing?  Here is a sample page:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="eng" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="generator" content="HTML Tidy, see www.w3.org" />
    <title>*Add your page title here* - Scotland's Health on the Web (SHOW)
</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="eGMS.accessibility" scheme="WCAG" content="insert WCAG rating 
here e.g. 'A' 'AA' etc." />
    <meta name="eGMS.accessibility" content='insert pics-1.1 content ratings 
here' />
    <meta name="DC.creator" content="author.forename=xxx; author.surname=xxx; 
role=xxx; organisation.name=xxx; organisation.email=organisation@somewhere" />
    <meta name="DC.date.created" scheme="ISO8601" content="yyyy-mm-dd" />
    <meta name="DC.identifier" scheme="URI" content="insert URL of page here" />
    <meta name="DC.publisher" content="organisation.name=name; 
organisation.address=line 1, line 2, line 3; 
organisation.postcode=postcode;organisation.tel=(0xxxx) xxx xxxx" />
    <meta name="DC.rights.copyright" content="Crown Copyright - insert year(s) 
of copyright eg 2000-2004" />
    <meta name="eGMS.subject.category" scheme="GCL" content="insert value from 
the Government Category List (GCL)" />
    <meta name="eGMS.subject.keyword" scheme="MeSH" content="MeSH 
heading=HEADING; MeSH number=NUMBER" />
    <meta name="DC.title" content="insert title of web page here" />
    <meta name="DC.type" scheme="e-GMSTES" content="insert value extracted from 
e-GMSTES here, or 'Web page' if no appropriate type exists" />
    <meta name="keywords" content="NHS, NHSScotland, National Health Service, 
National, Health Service, Scotland, Scottish, UK, health, service" />
    <meta name="description" content="insert summary of the page here" />
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
  </head>

  <body class="navBarBackground">
    <table width="100%" cellpadding="0" cellspacing="0" id="TitleTable" 
summary="">
      <tr>
        <td valign="middle" width="164px" align="left" 
class="leftpanelBackgroundColour">
          <div id="showPanel">
            <!-- #BeginLibraryItem "/Library/showPanel.lbi" -->

            <table width="120" border="0" cellpadding="0" cellspacing="0" 
class="toolbar" align="left" summary="">
              <colgroup span="1">
              </colgroup>

              <colgroup span="1" title="column containing links to help you use 
the site, allowing you to go to the home page, visit other SHOW sites, visit 
the general SHOW help page and email comments to the contact for this site">
              </colgroup>

              <tr>
                <td width="20" align="center" valign="middle"><a 
href="index.htm"><img src="images/home.gif" alt="Home" width="13" height="11" 
border="0" /></a></td>

                <td width="100" class="toolbar" align="left"><a 
href="index.htm" class="toolbar">HOME</a></td>
              </tr>

              <tr>
                <td width="20" align="center" valign="middle"><a 
href="http://www.show.scot.nhs.uk/"><img src="images/aboutshow.gif" width="12" 
height="13" border="0" alt="visit the Scotland's Health on the Web website, 
with links to further health information" /></a></td>

                <td width="100" class="toolbar" align="left"><a 
href="http://www.show.scot.nhs.uk/" class="toolbar" title="visit the Scotland's 
Health on the Web website, with links to further health information">OTHER SHOW 
SITES</a></td>
              </tr>

              <tr>
                <td width="20" align="center" valign="middle" height="9"><a 
href="http://www.show.scot.nhs.uk/help/showhelp1a.htm"><img 
src="images/help.gif" width="8" height="12" alt="general help in using 
Scotland's Health on the Web" border="0" /></a></td>

                <td width="100" class="toolbar" align="left"><a 
href="http://www.show.scot.nhs.uk/help/showhelp1a.htm" class="toolbar" 
title="general help in using Scotland's Health on the Web">HELP</a></td>
              </tr>

              <tr>
                <td width="20" height="9" align="center" valign="middle"><img 
src="images/comments.gif" width="12" height="7" alt="" /></td>

                <td width="100" class="toolbar" align="left">COMMENTS</td>
              </tr>
            </table>
            <!-- #EndLibraryItem -->
          </div>
        </td>

        <td valign="middle">
          <div class="siteTitle">
            <h1>Add your site title here</h1>
          </div>
        </td>

        <td align="right"><a href="http://www.show.scot.nhs.uk" title="this 
link opens in a new window"><img src="images/2colsLogo.gif" alt="NHSScotland 
Logo - links to the SHOW home page" width="58" height="38" hspace="10" 
vspace="0" border="0" /></a></td>
      </tr>
    </table>

    <table width="100%" cellpadding="0" cellspacing="0" summary="">
      <tr>
        <td class="topBorder"><img src="images/spacer.gif" width="1" 
height="10" alt="" /></td>
      </tr>

      <tr>
        <td><img src="images/swoosh2.gif" alt="" width="619" height="79" /></td>
      </tr>
    </table>

    <table width="100%" cellpadding="0" cellspacing="0" summary="">
      <tr>
        <td width="164px" class="leftpanelBackgroundColour" valign="top">
          <!-- #BeginLibraryItem "/Library/NavigationBar.lbi" -->

          <table border="0" cellspacing="0" cellpadding="5" summary="">
            <tr>
              <td align="center" valign="middle"><a href="aboutUs.htm"><img 
src="images/arrow2.gif" alt="" width="13" height="13" border="0" /></a></td>

              <td><a href="aboutUs.htm" class="navBarLinks">About us</a></td>
            </tr>

            <tr>
              <td align="center" valign="middle"><a 
href="newsandevents.htm"><img src="images/arrow2.gif" alt="" width="13" 
height="13" border="0" /></a></td>

              <td><a href="newsAndEvents.htm" 
class="navBarLinks">News/events</a></td>
            </tr>

            <tr>
              <td align="center" valign="middle"><a href="links.htm"><img 
src="images/arrow2.gif" alt="" width="13" height="13" border="0" /></a></td>

              <td><a href="links.htm" class="navBarLinks">Links</a></td>
            </tr>

            <tr>
              <td align="center" valign="middle"><a 
href="publications.htm"><img src="images/arrow2.gif" alt="" width="13" 
height="13" border="0" /></a></td>

              <td><a href="publications.htm" 
class="navBarLinks">Publications</a></td>
            </tr>

            <tr>
              <td align="center" valign="middle">&nbsp;</td>

              <td>&nbsp;</td>
            </tr>

            <tr>
              <td align="center" valign="middle">&nbsp;</td>

              <td>&nbsp;</td>
            </tr>
          </table>
          <!-- #EndLibraryItem --><br />

          <form name="form1" method="get" 
action="http://www.show.scot.nhs.uk/search/search.asp">
            <div id="searchPanel">
              <p><img src="images/magglass.gif" alt="Search the SHOW site" 
width="23" height="26" /><label for="qu">Search SHOW</label> <input name="qu" 
type="text" id="qu" title="enter words that relate to information you are 
looking for in this box, using a space between each word" value="Enter 
keywords" size="16" maxlength="40" /> <input type="hidden" name="adv" 
value="false" /> <input type="submit" name="Submit" value="go" /></p>
            </div>
          </form>
        </td>

        <td valign="top">
          <div id="mainContentArea">
            <h2>Links</h2>

            <p>Enter the content of the page here. Enter the content of the 
page here. Enter the content of the page here. Enter the content of the page 
here. Enter the content of the page here. Enter the content of the page 
here.</p>

            <p>Enter the content of the page here. Enter the content of the 
page here. Enter the content of the page here. Enter the content of the page 
here. Enter the content of the page here.</p>
          </div>
        </td>

        <td valign="top">
          <div id="resourcePanel">
            <div class="resourceHeader">
              <p>Other Relevant Links</p>
            </div>

            <div>
              <p><a href="#">Put any information relevant to this page in this 
section. Otherwise delete it.</a></p>
            </div>
          </div>
        </td>
      </tr>

      <tr>
        <td valign="bottom" class="leftpanelBackgroundColour"><img 
src="images/WhiteCurve.gif" alt="" width="164" height="55" 
align="bottom" /></td>

        <td>
          <!-- #BeginLibraryItem "/Library/FooterLinks.lbi" -->

          <table width="80%" border="0" align="center" summary="">
            <tr>
              <td abbr="links to the main sections of the website">
                <p style="text-align: center"><a 
href="index.htm">Home</a>&nbsp;|&nbsp;<a href="aboutUs.htm">About 
Us</a>&nbsp;|&nbsp; <a href="newsAndEvents.htm">News/Events</a>&nbsp;|&nbsp; <a 
href="links.htm">Links</a>&nbsp;|&nbsp; <a 
href="publications.htm">Publications</a></p>
              </td>
            </tr>
          </table>
          <!-- #EndLibraryItem -->
        </td>

        <td>&nbsp;</td>
      </tr>
    </table>
  </body>
</html>



Reproducible: Always
Steps to Reproduce:
1. Use the code that I have provided in the 'Details' section to create an HTML 
page
2. View the page in Internet Explorer 6 to view the intended font sizes
3. View the page in Mozilla to view the reduction in font sizes that occurs
4. Remove the DOCTYPE declaration and view the page again in Mozilla to observe 
that this corrects the problem

Actual Results:  
See 'Details'

Expected Results:  
See 'Details'
(Reporter)

Comment 1

14 years ago
Created attachment 142438 [details]
stylesheet for web page
(Reporter)

Comment 2

14 years ago
Important!  The 'steps to reproduce' I have given will not reproduce the error 
(my mistake).  After step 1, you must also place the style sheet (that I have 
attached to this bug report) in the same folder as the web page
> If I remove the DOCTYPE declaration, the pages display in Mozilla as intended.

Sounds like this page is relying on a quirk... Could you attach the page itself
to this bug in useful form (preferably pointing to the stylesheet you've already
attached)?
Also, which specific things are too small?  You have some text nested in
multiple toolbar-class things, which means that its font size should be on the
order of 5px or so....  In quirks, we cut off font size inheritance into tables
(just like IE does in general), so the fonts would automatically get bigger
because the 0.7em font size on the body won't propagate into the table...
(Reporter)

Comment 5

14 years ago
(In reply to comment #4)
> Also, which specific things are too small?  You have some text nested in
> multiple toolbar-class things, which means that its font size should be on the
> order of 5px or so....  In quirks, we cut off font size inheritance into 
tables
> (just like IE does in general), so the fonts would automatically get bigger
> because the 0.7em font size on the body won't propagate into the table...

Boris

Thanks for this hint.  I've now fixed the problem, which was indeed due to the 
nesting of a style sheet class that was progressively reducing the text size 
(since the class specifies a proportional text size).

Thanks again, Chris
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago
Resolution: --- → FIXED
FIXED means that a Mozilla code change fixed it...
Status: RESOLVED → UNCONFIRMED
Resolution: FIXED → ---
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago14 years ago
Resolution: --- → INVALID
Product: Browser → Seamonkey
You need to log in before you can comment on or make changes to this bug.