<
 
 
 
 
×
>
Vous consultez une page Web conservée, recueillie par Bibliothèque et Archives Canada le 2007-11-21 à 10:04:05. Il se peut que les informations sur cette page Web soient obsolètes, et que les liens hypertextes externes, les formulaires web, les boîtes de recherche et les éléments technologiques dynamiques ne fonctionnent pas. Voir toutes les versions de cette page conservée.
Chargement des informations sur les médias

You are viewing a preserved web page, collected by Library and Archives Canada on 2007-11-21 at 10:04:05. The information on this web page may be out of date and external links, forms, search boxes and dynamic technology elements may not function. See all versions of this preserved page.
Loading media information
X
Treasury Board of Canada Secretariat
Symbol of the Government of Canada
Skip to content | Skip to institutional links

Common menu bar links

TBS > CIOB > CLF 2.0 > CLF 2.0 Toolbox

Institutional links

Government of Canada Common Look and Feel Template Technical Guide

Table of Contents

1.0 Benefits of using the GC CLF template

The Government of Canada (GC) Common Look and Feel (CLF) template solution was developed over several months in summer 2006 by a team of technical experts recruited from several GC institutions. The template serves to improve and standardize the navigation and accessibility features for GC Web sites while reducing the associated burden on institutions to develop a technical solution for implementing CLF 2.0.

Some of the key benefits of adopting and adapting the GC CLF template in institutions include:

  • XHTML 1.0 Strict conformant, to improve compatibility with adaptive technologies, handheld devices, browsers and search engines.
  • Successfully tested on a wide range of adaptive technologies and browser/platform combinations to ensure that Canadians can access Web pages regardless of the technology used.
  • Major template components, such as the common menu bar, side menu, and content area are properly marked up with headings to simplify navigation with adaptive technologies such as screen readers.
  • Table-less layout and design to simplify client navigation and reduce the complexity of Web pages.
  • Presentation information centralized in global CSS files, which simplifies page maintenance and site updates, in addition to providing clients with the ability to override visual formatting and remove barriers to accessing information on Web pages.
  • Uses scaleable fonts and text-based navigational elements to improve accessibility and simplify navigation using adaptive technologies.
  • Printer-friendly functionality in the CSS helps to render pages more compatible with printers and to prevent printing unnecessary page elements.
  • Ability to enable full expandability with minor CSS modification to improve accessibility at a future date.  (Expandability has been successfully tested on a wide range of browser/platform combinations.)

2.0 Introduction to the Welcome Page templates

The Welcome Page templates must only be used for the main point of entry for a site or sub site.

2.1 Welcome Page template language variations

There are three different language variations of the Welcome Page template included in the GC CLF template: a bilingual Welcome Page, a unilingual Welcome Page and a multilingual Welcome page. Each of these language variations includes two message area variations.

2.1.1 Bilingual Welcome Page template

This template must be used for Web sites that are required to be available simultaneously in both official languages. It provides language links to content in both languages. Different templates that display the official languages in the prescribed order are available for Web sites of institutions headquartered in Quebec and for institutions headquartered in the rest of Canada.

2.1.2 Unilingual Welcome Page template

This template must only be used for sites that are allowed to offer information in one official language only. The unilingual Welcome Page template provides a language link to content in one language and includes a language notice in both official languages indicating that service is only provided in one official language.

2.1.3 Multilingual Welcome Page template

This template may be used by institutions to offer content in one or more languages in addition to content offered simultaneously in both official languages. The multilingual Welcome Page template allows other languages to be supported by including additional language links below the mandatory English and French links. These additional language links may be configured for any languages that need to be supported.

2.2 Welcome Page template message area variations

There are two message area variations of the Welcome Page template: a text-based message area variation and an image-based message area variation.

2.2.1 Text-based message area template (recommended)

This template divides the message area into an image-based top section, and a text-based bottom section. Text must not be embedded in the image; it must be kept separate and displayed instead in the foreground. The text-based lower section contains the institution name in both official languages.

This template must only be used for the main point of entry for an institutional Web site or sub site.

Note: This template is recommended for Welcome Pages because the text-based section of the message area is more accessible than the image-only message area of the image-based message area template.

2.2.2 Image-based message area template

This template includes an image in the entire message area. If this template is adopted, text should not be embedded in the image, but displayed in the foreground instead.

This template may only be used for the main point of entry for an institutional Web site or sub site.

Note: The text-based message area template is recommended for Welcome Pages because the text-based section of the message area is more accessible than the image-only message area of this template.


Top of Page

2.3 Welcome Page template examples

2.3.1 Bilingual Welcome Page templates

2.3.2 Unilingual Welcome Page templates

2.3.3 Multilingual Welcome Page templates

3.0 Introduction to the content page templates

The content page templates must be used for all pages except for the main point of entry for a site or sub site; use the Welcome Page templates for the main point of entry instead.

There are three different language variations of the Welcome Page template included in the GC CLF template. Each of these language variations include three layout variations.

3.1 Content page template language variations

There are three language variations of the content page template: one for bilingual sites, one for unilingual sites and one for languages other than English or French.

3.1.1 Content page template for bilingual and multilingual sites

This template must be used for all English and French content pages on bilingual and multilingual sites. This content page template is available in English and French. The English and French templates are unilingual except for a link in the common menu to the content in the other official language.

For multilingual site, links to content in languages other than English or French must not be included in the common menu bar. In cases where links to content in languages other than English or French are required, those links should be included in the left-hand menu, the right-hand menu or the content area.

3.1.2 Content page template for unilingual sites

This template must be used for all content pages on unilingual sites; this template is available in English and French. The English and French templates are unilingual except for a link in the common menu bar to an official languages notice.

3.1.3 Content page template for languages other than English or French

This template must be used for any content pages where the content is provided primarily in a language other than English or French. Different templates are available for institutions headquartered in Quebec and for institutions headquartered in the rest of Canada.

3.2 Content page template layout variations

There are three layout variations of the content page template: a three-column layout, a two-column layout and a one-column layout.

3.2.1 Three-column template

This template contains a three-column layout that consists of a central content area with side menus to the left and the right. The institution's primary menu page and all sub site main pages must apply the three-column layout. Although the three-column template must be used for all top-level pages, it can also be used for Web applications and secondary pages on an institutional Web site.

Note: The three-column layout is mandatory for the main pages of an institutional Web. It is however recommended that a two-column layout be used instead for secondary pages, to benefit from an increased content area and allow for shorter Web pages.

3.2.2 Two-column template

This template contains a two-column layout that consists of a central content area with a left side menu. This template is recommended for all secondary pages of an institutional Web site. The two-column layout allows for shorter Web pages than the three-column layout by increasing the width of the content area. This template may also be used for Web applications.

Note: In cases where it is not possible to fit content within the two-column template without exceeding the content area width, the one-column template should be used instead.

3.2.3 One-column template

This template contains a one-column layout that consists of only a central content area. This layout should only be used in cases where it is not possible to fit the content within the two-column template on secondary pages or for Web applications without exceeding the content area width.


Top of Page

3.3 Content page template examples

3.3.1 Content page templates for bilingual sites

3.3.2 Content page templates for unilingual sites

3.3.3 Content page templates for languages other than English or French

4.0 Introduction to the server message page templates

The server message page templates must only be used for messages generated by Web servers and Web application servers.

4.1 Server message page template language variations

There are two different language variations of the server message page template included in the GC CLF template: a bilingual server message page and a unilingual server message page.

4.1.1 Unilingual server message page template

This template must be used for server messages of unilingual sites or sites where the language preference of the client is known.

4.1.2 Bilingual server message page template

This template must be used for server messages of bilingual and multilingual sites where the language preference of the client is not known. Different templates that display the official languages in the prescribed order are available for Web sites of institutions headquartered in Quebec and for institutions headquartered in the rest of Canada.

4.2 Server message page template examples

4.2.1 Unilingual server message page templates

4.2.2 Bilingual server message page templates

5.0 How to download the GC CLF templates

The GC CLF templates provide all of the required images, CSS files and HTML files in one convenient download. The templates can be downloaded using the following link:

6.0 How to install and configure the templates

This section provides instructions to help institutions with installing and configuring the GC CLF template. The configured template should be shared with all the authoring groups within the institution. It is recommended that this process be completed once per institution to ensure consistency throughout the institution's Web site.

6.1 Selecting a Welcome Page template

Select a Welcome Page template for the institution. The text-based message area templates are recommended over the image-based message area templates for accessibility reasons.

Use the following table to determine which Welcome Page template file should be used:

Language of the site Headquarters location Message area variation Template file
Bilingual Outside Quebec Text-based wp-pa.html
Image-based wp-pa-alt.html
In Quebec Text-based wp-pa-quebec.html
Image-based wp-pa-alt-quebec.html
Unilingual English n/a Text-based uniling\wp-pa-ul-eng.html
Image-based uniling\wp-pa-alt-ul-eng.html
Unilingual French n/a Text-based uniling\wp-pa-ul-fra.html
Image-based uniling\wp-pa-alt-ul-fra.html
Multilingual Outside Quebec Text-based multiling\wp-pa-ml.html
Image-based multiling\wp-pa-alt-ml.html
In Quebec Text-based multiling\wp-pa-ml-quebec.html
Image-based multiling\wp-pa-alt-ml-quebec.html

6.2 Configuring the image files

  1. Replace sig-eng.gif and sig-fra.gif in the images directory with institutional signature images, without changing the file names. The images must meet the following requirements:
    • The institutional signature must be the only graphical element in the image.
    • The institutional signature must use the entire vertical space of the image (that is, no vertical white space above or below the institutional signature).
    • The institutional signature must have no horizontal white space to the left of the flag symbol or the Coat of Arms.
    • Institutional signatures that use the flag symbol must have an image height of 20 pixels, except in cases where additional height is required to fit the applied title.
    • Institutional signatures that use the Coat of Arms must have an image height of 50 pixels, except in cases where additional height is required to fit the applied title.
  2. Institutional signatures that exceed 260 pixels in width will require a change to the width and the starting position of the skip navigation links container. Instructions can be found in section 6.3.2.17 (Changing the width and the starting position of the skip navigation links container).
  3. Institutional signatures that exceed 20 pixels in height will require an adjustment to the alignment of the FIP images. Instructions can be found in section 6.3.2.15 (Adjusting the alignment of the FIP images).
  4. Replace the Welcome Page image in the image directory with an institutional Welcome Page image without changing the file name. The Welcome Page image should not contain text. For accessibility reasons, this image should be included using CSS, which is covered in section 6.3 (Configuring the CSS files). The image to replace depends on the Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).
    • Text-based message area: Replace wp-pa.gif with the new Welcome Page image. The new image must be 600 pixels wide by 130 pixels high. These instructions apply to the following Welcome Page template files:
      • wp-pa.html
      • wp-pa-quebec.html
      • uniling\wp-pa-ul-eng.html
      • uniling\wp-pa-ul-fra.html
      • multiling\wp-pa-ml.html
      • multiling\wp-pa-ml-quebec.html
    • Image-based message area: Replace wp-pa-alt.gif with the new Welcome Page image. The new image must be 600 pixels wide by 250 pixels high. These instructions apply to the following Welcome Page template files:
      • wp-pa-alt.html
      • wp-pa-alt-quebec.html
      • uniling\wp-pa-alt-ul-eng.html
      • uniling\wp-pa-alt-ul-fra.html
      • multiling\wp-pa-alt-ml.html
      • multiling\wp-pa-alt-ml-quebec.html
  5. If there is a requirement for a background image in the banner area, create an image for that purpose and place it in the images directory. The image should not contain any text. For accessibility reasons, this image should be included using CSS, which is covered in section 6.3 (Configuring the CSS files).

    Note:     It is recommended that the banner area consist of a background colour instead of a background image. Should the template be made expandable in the future, a background image would be too wide when the template collapses and too narrow when the template expands.

    Aside from the potential expandable template issues, the background image can be made accessible if the following requirements are met:

    1. The image must be no more than 760 pixels wide by 80 pixels high. Exceeding these dimensions will result in the image being clipped.
    2. The image should not contain any text for accessibility reasons. Text embedded in images is difficult for some clients to read since they are unable to control the font size or the foreground/background colour combinations. Also, by not embedding text, the same image can be used on both the English and French pages.
    3. The image must have a background colour that will achieve high contrast with white text. If the background colour does not achieve high contrast with the white text, then the institutional name and URL will be difficult to read for some clients.
    4. The majority of the image should be a plain colour except for the left and right sides of the image. The reason for this limitation is to ensure that all clients can read the institutional name and URL, which will be displayed over the image. If the part of the image behind the institutional name and URL is not plain, then that text will be difficult to read.

Top of Page

6.3 Configuring the CSS files

The template was developed using multiple CSS files to control layout and design. Many of the CSS files must not be modified because they are critical to ensuring a consistent result on most browsers.

The following CSS files must not be modified:

  • css\2col.css: Controls the two-column layout of the two-column template.
  • css\3col.css: Controls the three-column layout of the three-column template.
  • css\base2.css: Controls the content page scaleable font-size support for most browsers.
  • css\base.css: Controls the content page scaleable font-size support for legacy browsers, the utility classes  and the layout for the FIP elements, the banner elements, the common menu bar elements, the side menu elements and the footer elements.
  • css\pf-if.css: Controls the printer-specific template functionality.
  • css\wp-pa.css: Controls the Welcome Page scaleable font-size support for legacy browsers and the Welcome Page layout.
  • css\wp-pa2.css: Controls the Welcome Page scaleable font-size support for most browsers.

The following CSS files that can be modified:

  • css\base-institution.css: Controls the customizable content page properties.
  • css\wp-pa-institution.css: Controls the customizable Welcome Page properties
  • css\institution.css: Controls the institution-specific CSS classes. CSS classes that will be used by multiple pages should be placed in this file.

6.3.1 Configuring css\wp-pa-institution.css

Both the layout and design of the Welcome Page templates are controlled using CSS. This section provides instructions for configuring some of the visual elements in the Welcome Page templates by modifying the css\wp-pa-institution.css file.

6.3.1.1 Changing the background/foreground colours of the text-based message area (text-based message area template only)

To change the background and foreground colours of the text-based message area in the text-based message area templates (wp-pa.html and wp-pa-quebec.html), change the "background-color" and "color" properties of the "div.headcontainer" class.

div.headcontainer {
      background-color: #CC9;
      color: #000;
}

6.3.1.2 Changing the background image of the image-based message area

To change the background image of the image-based message area, change the first item of the "background" property of the "div.msgarea" and "div.msgareaalt" classes.

div.msgarea {
      background: url(../images/wp-pa.gif) #696;
}
div.msgareaalt {
      background: url(../images/wp-pa-alt.gif) #696;
}

6.3.1.3 Changing the background/foreground colours of the image-based message area

To change the background and foreground colours of the image-based message area, change the "color" property of the "div.msgarea h1", "div.msgareaalt h1" class and the second item of the "background" property of the "div.msgarea" and "div.msgareaalt" classes.

div.msgarea h1, div.msgareaalt h1 {
      text-align: center;
      color: #FFF;
      font-weight: bold;
}
div.msgarea {
      background: url(../images/wp-pa.gif) #69C no-repeat;
}
div.msgareaalt {
      background: url(../images/wp-pa-alt.gif) #69C no-repeat;
}

6.3.1.4 Changing the vertical positioning of the text in the image-based message area

To change the vertical positioning of the text in the image-based message area, change the "padding-top" property of the "div.msgarea h1" and "div.msgareaalt h1" classes.

div.msgarea h1 {
      padding-top: 55px;
}
div.msgareaalt h1 {
      padding-top: 160px;
}

6.3.2 Configuring css\base-institution.css

Both the layout and design of the content page templates are controlled using CSS. This section provides instructions for configuring some of the visual elements in the content page templates by modifying the css\base-institution.css file.

Note: To ensure consistent results on a wide range of browser/platform combinations, do not make any changes to the css\base-institution.css file other than what is specified in this section.

6.3.2.1 Changing the banner background

The banner background can be changed to be either a background colour or a background image.

Note: It is recommended that the banner area use a background colour instead of a background image. Should the template be made expandable in the future, the background image will be too wide when the template collapses and will be too narrow when the template expands. Also, the background image will not be accessible unless the requirements specified in section 6.2 (Configuring the image files) are met.

Specifying the banner background colour:
To change the banner background colour, change the colour specified for the "background-color" property in the "div.banner" class. The "div.banner" class is located in base-institution.css.

div.banner{
    color: #FFF;
    background-color: #696;
}

Specifying a language neutral banner background image:
To change the background colour to a language neutral background image, it will be necessary to replace the " background-color" property in the "div.banner" class with a "background" property that specifies both a background colour and a background image. The background colour will only be visible where the background image is not.

div.banner{
    color: #FFF;
    background: #696 url("/images/bbg.jpg") no-repeat center center;
}

Specifying a language-specific banner background image:
To change the background colour to a language-specific background image, it will be necessary to first perform step 5 in section 6.6.1, Content page template for bilingual and multilingual sites. Next, change the URL and the background colour specified for the English and French content pages.

  1. For English content pages, change the URL and the background colour specified for the "background" property in the "div.banner-eng, div.banner-lfcoa-eng" class. The background colour will only be visible where the background image is not.

    div.banner-eng, div.banner-lfcoa-eng {
        background: url() #FFF no-repeat center center;
    }
  2. For French content pages, change the URL and the background colour specified for the "background property" in the "div.banner-fra, div.banner-lfcoa-fra" class. The background colour will only be visible where the background image is not.

    div.banner-fra, div.banner-lfcoa-fra {
        background: url() #FFF no-repeat center center;
    }

Note: To ensure consistent results on all pages, the URL used to specify the background image should either be an absolute URL (for example, "http://www.url.gc.ca/images/bbg.jpg") or a site absolute url (for example, "/images/bbg.jpg"). For the image to display when viewing the pages locally (for testing purposes), a local URL must be used (for example, "file:///C:/images/bbg.jpg").

6.3.2.2 Changing the regular and visited link colours for the content area

To change the regular and visited link colours for the content area, change the colours specified for the "color" property in the "div.center a:link" and "div.center a:visited classes".

div.center a:link {
      color: #039;
}
div.center a:visited {
      color: #663;
}

6.3.2.3 Changing the link colour for the footer

To change the link colour for the footer, change the colours specified for the "color" property in the "div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center .topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited" class.

div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center div.topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited {
      color: #039;
      background-color: #FFF;
}

6.3.2.4 Changing the background/foreground colours of the side menu titles

To change the background and foreground colours of the side menu titles, change the colours specified for the "background-color" and "color" properties in the "div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited" class.

div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited {
      background-color: #696;
      color: #FFF;
      text-decoration: none;
}

6.3.2.5 Changing the background/foreground colours of the regular left side menu text

To change the background and foreground colours of the regular left side menu text, change the colours specified for the "background-color" and "color" properties in the "div.left li.menucontent, div.left div.menucontent, div.left a.menulink" class.

div.left li.menucontent, div.left div.menucontent, div.left a.menulink {
      color :#000;
      background-color: #CC9;
}

6.3.2.6 Changing the background/foreground colours of the regular right side menu text (three-column template only)

To change the background and foreground colours of the regular right side menu text in the three-column template, change the colours specified for the "background-color" and "color" properties in the "div.right li.menucontent, div.right div.menucontent" and "div.right a.menulink" classes.

div.right li.menucontent, div.right div.menucontent {
      color: #000;
      background-color: #FFF;
}
div.right a.menulink {
      color: #000;
      background-color: #FFF;
}

6.3.2.7 Changing the background colour of the proactive disclosure bar (three-column template only)

To change the background colour of the proactive disclosure bar in the left side menu of the three-column template, change the colour specified for the "background-color" property in the "div.prodis" class.

div.prodis {
      background-color: #696;
}

6.3.2.8 Changing the background colour of the footer bar

To change the background colour of the footer bar at the bottom of the page, change the colour specified for the background-color property in the div.footer div.footerline class.

div.footer div.footerline {
      background-color: #696;
}

6.3.2.9 Changing the dashed borders in the left side menu

To change the dashed borders in the left side menu, change the "border-bottom" property in the "div.left li.menucontent, div.left div.menucontent" class.

div.left li.menucontent, div.left div.menucontent {
      border-bottom: 1px dotted #FFF;
}

6.3.2.10 Changing the colour of the content area border (three-column template only)

To change the content area border in the three-column template, change the "border" property in the "div.blackborder" class.

div.blackborder {
      border: solid #000 1px;
}

6.3.2.11 Changing the colour of the right side menu border (three-column template only)

To change the right side menu border in the three-column template, change the "border" property in the "div.right li ul.nav, div.right li p.nav, div.right li div.nav" class.

div.right li ul.nav, div.right li p.nav, div.right li div.nav {
     border: 1px solid #000;
}

6.3.2.12 Changing the background colour of the free space below the side menus and the content area (two-column and three-column templates only)

To change the background colour of the free space below the side menus and the content area, change the "background-color" property in the "div.colLayout" class.

div.colLayout {
      background-color: #FFF;
      height: 100%;
}

6.3.2.13 Changing the background colour of the browser window surrounding the page

To change the background colour of the browser window surrounding the page, change the "background-color" property in the "body" class.

body {
      background-color: #FFF;
}

6.3.2.14 Changing the default colour of the heading elements (h1 - h6)

To change the default colour of the heading elements (h1, h2, h3, h4, h5 and h6 ), change the "color" property in the "div.center h1, h2, h3, h4, h5, h6" class.

div.center h1, h2, h3, h4, h5, h6 {
      color: #000;
}

6.3.2.15 Adjusting the alignment of the FIP images

When institutional signature images exceed 20 pixels in height, the alignment of the FIP images need to be adjusted.

To adjust the alignment of the FIP images, change the "height" property in the "div.fip", "div.cwm" class and the "padding-top" property in the "div.cwm img" class.

div.fip, div.cwm {
      height: 20px;
}
div.cwm img {
      padding-top: 0px;
}

The "height" property in the "div.fip, div.cwm" class must have the same pixel height as the institutional signature image.

The "padding-top" property in the "div.cwm img" class must be adjusted to ensure correct vertical alignment between the "Canada" wordmark and the institutional signature.


Top of Page
6.3.2.16 Changing the default foreground, background, and border colours of the skip navigation links (when visible)

To change the default foreground, background, and border colours of the skip navigation links (when visible), change the "color", "background-color", and "border-color" properties in the "div.page div.core div.navaid a:hover,
div.page div.core div.navaid a:active,
div.page div.core div.navaid a:focus" class.

div.page div.core div.navaid a:hover,
div.page div.core div.navaid a:active,
div.page div.core div.navaid a:focus {
     color: #000;
     background-color: #CC9;
     border-color: #000;
}

6.3.2.17 Changing the width and the starting position of the skip navigation links container

For institutional signatures that are wider than the Government of Canada institutional signature, it may be necessary to change the width and the starting position of the skip navigation links container to prevent the links from overlapping the institutional signature and the "Canada" wordmark in Internet Explorer when JavaScript is disabled.

Internet Explorer 5.x and 6.x: To change the width of the skip navigation links container in Internet Explorer 5.x and 6.x, change the "width" property in the "div.page div.core div.navaid" class. To change the starting position of the skip navigation links container in Internet Explorer 5.x and 6.x, change the "padding-left" property of the "div.page div.core div.navaid" class.

div.page div.core div.navaid {
      width: 450px;
      padding-left: 50px;
}

Internet Explorer 7.x: To change the width of the skip navigation links container in Internet Explorer 7.x, change the "width" property in the "*:first-child+html div.page div.core div.navaid" class. To change the starting position of the skip navigation links container in Internet Explorer 7.x, change the "padding-left" property of the "*:first-child+html div.page div.core div.navaid" class.

*:first-child+html div.page div.core div.navaid {
      width: 450px;
      padding-left: 50px;
}

Internet Explorer 5.x and 6.x: To change the width of the skip navigation links container in Internet Explorer 5.x and 6.x, change the "width" property in the "* html div.page div.core div.navaid" class. To change the starting position of the skip navigation links container in Internet Explorer 5.x and 6.x, change the "padding-left" property of the "* html div.page div.core div.navaid" class.

* html div.page div.core div.navaid {
      width: 450px;
      padding-left: 50px;
}

6.4 Installing the image and CSS files

Copy the "images" and "css" directory to a central location that can be referenced by all Web pages. To simplify future maintenance, all Web pages should link to the same set of image and CSS files.

6.5 Configuring and installing the Welcome Page template

6.5.1 Bilingual Welcome Page template

These instructions apply to the unilingual Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).

  1. Modify all image and CSS file paths in the Welcome Page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
    1. ../images/
    2. ../css/
  2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the Welcome Page template.
    1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif.
    2. For institutions headquartered outside Quebec, the alt text must be the institution name in English, a space, a pipe, another space, followed by the institution name in French (for example, alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
    3. For institutions headquartered in Quebec, the alt text must be the institution name in French, a space, a pipe, another space, followed by the institution name in English (for example, alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
  3. Change the message floating over the image in the message area. The message must be bilingual. In cases where the message needs to be hidden, add "class="hidden"" to the h1 element. This will make the message invisible while allowing it to still be used as a text equivalent by adaptive technologies.
    1. For institutions headquartered outside Quebec, the message must include the English text, a space, a pipe, another space, followed by the French text (for example, <h1>Welcome | <span lang="fr" xml:lang="fr">Bienvenue</span></h1>)
    2. For institutions headquartered in Quebec, the message must include the French text, a space, a pipe, another space, followed by the English text (for example, <h1>Bienvenue | <span lang="en" xml:lang="en">Welcome</span></h1>)
  4. If the text-based message area template is being used, change the institution names in the text-based message area. The institution name must be provided in both official languages.
    1. For institutions headquartered outside Quebec, the English institution name must be on the left and the French institution name must be on the right.

      <div class="headtitleLft">Institution Name</div>
      <div class="headtitleRgt" lang="fr" xml:lang="fr">Nom de l'institution</div>
    2. For institutions headquartered in Quebec, the French institution name must be on the left and the English institution name must be on the right.

      <div class="headtitleLft">Nom de l'institution</div>
      <div class="headtitleRgt" lang="en" xml:lang="en">Institution Name</div>
  5. Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in English:
    1. English
    2. Important Notices
  6. Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in French:
    1. Français
    2. Avis importants
  7. Populate the metadata elements with appropriate values.
  8. Provide an appropriate title within the title element. The title must be bilingual.
    1. For institutions headquartered outside Quebec, the title must include the English text, a space, a pipe, another space, followed by the French text (for example, <title>Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada</title>).
    2. For institutions headquartered in Quebec, the title must include the French text, a space, a pipe, another space, followed by the English text for example, <title>Secrétariat to Conseil du Trésor du Canada | Treasury Board of Canada Secretariat</title>).
  9. Change the filename of the Welcome Page template to the filename that the institutional Web server will load by default (for example, index.html).
  10. Copy the Welcome Page template to the main entry point of the site or sub site. The main entry point is usually the root folder (for example, www.tbs-sct.gc.ca/).

6.5.2 Unilingual Welcome Page template

These instructions apply to the unilingual Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).

  1. Modify all image and CSS file paths in the Welcome Page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
    1. ../images/
    2. ../css/
  2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the Welcome Page template.
    1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif.
    2. For unilingual English sites, the alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat").
    3. For unilingual French sites, the alt text must be the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada").
  3. Change the message floating over the image in the message area. The message must be in the language of the page. In cases where the message needs to be hidden, add "class="hidden"" to the h1 element. This will make the message invisible while allowing it to still be used as a text equivalent by adaptive technologies.
    1. For unilingual English sites, the message must be in English (for example, <h1>Welcome</h1>)
    2. For unilingual French sites, the message must be in French (for example, <h1>Bienvenue</h1>)
  4. If the text-based message area template is being used, change the institution names in the text-based message area. The institution name must be provided in the language of the page. .
    1. For unilingual English sites, the English institution name must be on the left. <div class="headtitleLft">Institution Name</div>
    2. For unilingual French sites, the French institution name must be on the left. <div class="headtitleLft">Nom de l'institution</div>
  5. For unilingual English sites, change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in English:
    1. Enter
    2. Important Notice
  6. For unilingual French sites, change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in French:
    1. Entrer
    2. Avis importants
  7. Populate the metadata elements with appropriate values.
  8. Provide an appropriate title within the title element. The title must be unilingual..
    1. For unilingual English sites, the title must be in English (for example, <title>Treasury Board of Canada Secretariat</title>).
    2. For unilingual French sites, the title must be in French (for example, <title>Secrétariat to Conseil du Trésor du Canada</title>).
  9. Change the filename of the Welcome Page template to the filename that the institutional Web server will load by default for example, index.html).
  10. Copy the Welcome Page template to the main entry point of the site or sub site. The main entry point is usually the root folder (for example, www.tbs-sct.gc.ca/).

6.5.3 Multilingual Welcome Page template

These instructions apply to the multilingual Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).

  1. Modify all image and CSS file paths in the Welcome Page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
    1. ../images/
    2. ../css/
  2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the Welcome Page template
    1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif.
    2. For institutions headquartered outside Quebec, the alt text must include the institution name in English, a space, a pipe, another space, followed by the institution name in French (for example, alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
    3. For institutions headquartered in Quebec, the alt text must include the institution name in French, a space, a pipe, another space, followed by the institution name in English (for example, alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
  3. Change the message floating over the image in the message area. The message must be bilingual. In cases where the message needs to be hidden, add "class="hidden"" to the h1 element. This will make the message invisible while allowing it to still be used as a text equivalent by adaptive technologies.
    1. For institutions headquartered outside Quebec, the message must include the English text, a space, a pipe, another space, followed by the French text (for example, <h1>Welcome | <span lang="fr" xml:lang="fr">Bienvenue</span></h1>)
    2. For institutions headquartered in Quebec, the message must include the French text, a space, a pipe, another space, followed by the English text (for example, <h1>Bienvenue | <span lang="en" xml:lang="en">Welcome</span></h1>)
  4. If the text-based message area template is being used, change the institution names in the text-based message area. The institution name must be provided in both official languages.
    1. For institutions headquartered outside Quebec, the English institution name must be on the left and the French institution name must be on the right.

      <div class="headtitleLft">Institution Name</div>
      <div class="headtitleRgt" lang="fr" xml:lang="fr">Nom de l'institution</div>
    2. For institutions headquartered in Quebec, the French institution name must be on the left and the English institution name must be on the right.

      <div class="headtitleLft">Nom de l'institution</div>
      <div class="headtitleRgt" lang="en" xml:lang="en">Institution Name</div>
  5. Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in English:
    1. English
    2. Important Notices
  6. Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in French:
    1. Français
    2. Avis importants
  7. Change the paths of the language links other than English or French to ensure they point to the appropriate institutional pages in the same language.
  8. Populate the metadata elements with appropriate values.
  9. Provide an appropriate title within the title element. The title must be bilingual.
    1. For institutions headquartered outside Quebec, the title must include the English text, a space, a pipe, another space, followed by the French (for example, <title>Treasury Board of Canada Secretariat | Secrétariat to Conseil du Trésor du Canada</title>).
    2. For institutions headquartered in Quebec, the title must include the French text, a space, a pipe, another space, followed by the English text (for example, <title>Secrétariat to Conseil du Trésor du Canada | Treasury Board of Canada Secretariat</title>).
  10. Change the filename of the Welcome Page template to the filename that the institutional Web server will load by default (for example, index.html).
  11. Copy the Welcome Page template to the main entry point of the site or sub site. The main entry point is usually the root folder (for example, www.tbs-sct.gc.ca/).

Top of Page

6.6 Configuring the content page templates

6.6.1 Content page template for bilingual and multilingual sites

This template must be used for all English and French content pages on bilingual and multilingual sites.

  1. Modify all image and CSS file paths in the *col-eng.html and *col-fra.html files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
    1. ../images/
    2. ../css/
  2. Change the image width, height, and alt text specified for the institutional signature (images/sig-eng.gif and images/sig-fra.gif) in the *col-eng.html and *col-fra.html files.
    1. The specified width and height must be consistent with the width and height for images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.15 (Adjusting the alignment of the FIP images).
    2. The alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat") for the *col-eng.html files, and the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada") for the *col-fra.html files.
  3. Change the institution name in the banner area of the *col-eng.html and *col-fra.html files. The institution name must match the language of the page.
    1. For the *col-eng.html pages, the institution name must be in English (for example, <p class="main">Treasury Board of Canada Secretariat</p> ).
    2. For the *col-fra.html pages, the institution name must be in French (for example, <p class="main">Secrétariat du Conseil du Trésor du Canada</p> ).
  4. Change the institution URL in the banner area of the *col-eng.html and *col-fra.html files. The institution URL in the banner must match the language of the page.
    1. For the *col-eng.html pages, the institution URL must be in English followed by French (for example, <p class="siteuri">tbs-sct.gc.ca</p>).
    2. For the *col-fra.html pages, the institution URL must be in French followed by English (for example, <p class="siteuri">sct-tbs.gc.ca</p>).
  5. In the case where separate English and French banner images are required, change the "banner" class for the banner area of the *col-eng.html and *col-fra.html files as follows to enable support for the separate images. This change will also make the text-based institution name and URL invisible while allowing them to still be used as text equivalents by adaptive technologies.
    1. For the *col-eng.html pages, change the "banner" class to "banner-eng" or "banner-lfcoa-eng" if the stylized leaf is included in the image.
    2. For the *col-fra.html pages, change the "banner" class to "banner-fra" or "banner-lfcoa-fra" if the stylized leaf is included in the image.
  6. Change the paths of the following links in the *col-eng.html files to ensure they point to the appropriate institutional pages in English:
    1. Home
    2. Contact Us
    3. Help
    4. Search
    5. Important Notices
  7. Change the paths of the following links in the *col-fra.html files to ensure they point to the appropriate institutional pages in French:
    1. Accueil
    2. Contactez-nous
    3. Aide
    4. Recherche
    5. Avis importants
  8. Change the metadata elements in the *col-eng.html and *col-fra.html files as required.

6.6.2 Content page template for unilingual English sites

This template must be used for all content pages on unilingual English sites.

  1. Modify all image and CSS file paths in the uniling\*col-ul-eng.html files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
    1. ../images/
    2. ../css/
  2. Change the image width, height, and alt text specified for the institutional signature (images/sig-eng.gif) in the uniling\*col-ul-eng.html files.
    1. The specified width and height must be consistent with the width and height for images/sig-eng.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.15 (Adjusting the alignment of the FIP images).
    2. The alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat").
  3. Change the institution name in the banner area of the uniling\*col-ul-eng.html files. The institution name must be in English (for example, <p class="main">Treasury Board of Canada Secretariat</p>).
  4. Change the institution URL in the banner area of the uniling\*col-ul-eng.html files. The institution URL must be in English followed by French (for example, <p class="siteuri">tbs-sct.gc.ca</p>).
  5. In the case where the text-based institution name and URL need to be hidden, change the "banner" class for the banner area of the *col-ul-eng.html files as follows. This change will make the text-based institution name and URL invisible while allowing them to still be used as text equivalents by adaptive technologies.

    For the *col-ul-eng.html pages, change the "banner" class to "banner-eng" or "banner-lfcoa-eng" if the stylized leaf is included in the image.
  6. Change the path of the Avertissement link in the uniling\*col-ul-eng.html files to ensure it points to the official languages notice.
  7. Change the paths of the following links in the uniling\*col-ul-eng.html files to ensure they point to the appropriate institutional pages in English:
    1. Home
    2. Contact Us
    3. Help
    4. Search
    5. Important Notices
  8. Change the metadata elements in the uniling\*col-ul-eng.html files as required.

6.6.3 Content page template for unilingual French sites

This template must be used for all content pages on unilingual French sites.

  1. Modify all image and CSS file paths in the uniling\*col-ul-fra.html files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
    1. ../images/
    2. ../css/
  2. Change the image width, height, and alt text specified for the institutional signature (images/sig-fra.gif) in the uniling\*col-ul-fra.html files.
    1. The specified width and height must be consistent with the width and height for images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.15 (Adjusting the alignment of the FIP images).
    2. The alt text must be the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada").
  3. Change the institution name in the banner area of the uniling\*col-ul-fra.html files. The institution name must be in French (for example, <p class="main">Secrétariat du Conseil du Trésor du Canada</p>).
  4. Change the institution URL in the banner area of the uniling\*col-ul-fra.html files. The institution URL must be in French followed by English (for example, <p class="siteuri">sct-tbs.gc.ca</p>).
  5. In the case where the text-based institution name and URL need to be hidden, change the "banner" class for the banner area of the *col-ul-fra.html files as follows. This change will make the text-based institution name and URL invisible while allowing them to still be used as text equivalents by adaptive technologies.

    For the *col-ul-fra.html pages, change the "banner" class to "banner-fra" or "banner-lfcoa-fra" if the stylized leaf is included in the image.
  6. Change the path of the Notice link in the uniling\*col-ul-fra.html files to ensure it points to the official languages notice.
  7. Change the paths of the following links in the uniling\*col-ul-fra.html files to ensure they point to the appropriate institutional pages in French:
    1. Accueil
    2. Contactez-nous
    3. Aide
    4. Recherche
    5. Avis importants
  8. Change the metadata elements in the uniling\*col-ul-fra.html files as required.

6.6.4 Content page template for languages other than English or French

This template must be used for content pages where the content is provided primarily in a language other than English or French.

For institutions headquartered outside Quebec, these instructions apply to the multiling\*col-ml-spa.html files. For institutions headquartered in Quebec, these instructions apply to the multiling\*col-ml-quebec-spa.html files.
  1. Modify all image and CSS file paths in the content page template files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
    1. ../images/
    2. ../css/
  2. Change the language specified in the html element. The language code for the language of the page must be specified for the lang and xml:lang attributes (for example, <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">).
  3. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the content page template files.
    1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.15 (Adjusting the alignment of the FIP images).
    2. The alt text must be the institution name in the language of the page (for example, alt="Gobierno de Canadá").
  4. Change the image alt text specified for the "Canada" wordmark in the content page template files. The alt text must be "Symbol of the Government of Canada" in the language of the page (for example, alt="Símbolo del Gobierno de Canadá").
  5. Change the institution name in the banner area of the content page template files. The institution name must match the language of the page (for example, <p class="main">Gobierno de Canadá</p>).
  6. Change the institution URL in the banner area of the content page template files. The institution URL in the banner must match the language of the page.
    1. For institutions headquartered outside Quebec, the institution URL must be in English followed by French (for example, <p class="siteuri">tbs-sct.gc.ca</p>).
    2. For the *col-fra.html pages, the institution URL must be in French followed by English (for example, <p class="siteuri">sct-tbs.gc.ca</p>).
  7. Change the language of the skip navigation links. The skip navigation links must be in the language of the page.

    <a href="#cont">Sáltese al contenido</a>
    <a href="#il">Sáltese las conexiones institucionales</a>

  8. Change the invisible h1 element for the left side menu. The invisible h1 element must be in the language of the page (for example, <h1 class="navaid"><a name="il" id="il">Conexiones institucionales</a></h1>)
  9. Change the paths of the following links in the content page template files to ensure they point to the appropriate institutional pages in English:
    1. Home
    2. Contact Us
    3. Help
    4. Search
    5. Important Notices
  10. Change the paths of the following links in the content page template files to ensure they point to the appropriate institutional pages in French:
    1. Accueil
    2. Contactez-nous
    3. Aide
    4. Recherche
    5. Avis importants
  11. Change the metadata elements in the content page template files as required. The metadata values must be in the language of the page. Ensure the dc.language metadata element specifies the language code for the language of the page (for example, <meta name="dc.language" scheme="ISO639-2/T" content="es" />).
  12. Change the language of the Date Modified | Date de modification label in the lower left corner. The language of the label must be in the language of the page (for example, Fecha modificó : <span class="date">2006-06-22</span>).
  13. Change the language of the Top of page links in the content area and in the footer. The language of the link text and the title value must be in the language of the page (for example, <a href="#tphp" title="Vuelva a la cima de página"><img class="uparrow" src="../images/tphp.gif" width="19" height="12" alt="" /><br />Cima de página</a>).

Top of Page

6.7 Configuring the server message page templates

6.7.1 Unilingual server message page templates

This template must be used for server messages of unilingual sites or sites where the language preference of the client is known.

For unilingual English server message pages, these instructions apply to the srvmsg\srvmsg-eng.html file. For unilingual French server message pages, these instructions apply to the srvmsg\srvmsg-fra.html file.
  1. Modify all image and CSS file paths in the server message page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
    1. ../images/
    2. ../css/
  2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the server message page template.
    1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.15 (Adjusting the alignment of the FIP images).
    2. For unilingual English server message pages, the alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat").
    3. For unilingual French server message pages, the alt text must be the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada").
  3. For unilingual English server message pages, change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in English
    1. Important Notices
  4. For unilingual French server message pages, change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in French:
    1. Avis importants
  5. Provide an appropriate title within the title element. The title must be unilingual. Consult Common Error Messages for a list of appropriate message titles and content.
    1. For unilingual English server message pages, the title must be in English (for example, <title>HTTP Error 404 - Not Found</title>).
    2. For unilingual French server message pages, the title must be in French (for example, <title>Erreur HTTP 404 - Non trouvé</title>).
  6. Populate the content area title with an appropriate title. The content area title should be consistent with the title provided within the title element (Step 5). Consult Common Error Messages for a list of appropriate message titles and content.
    1. For unilingual English server message pages, the title must be in English:
      <h1><a name="cont" id="cont">
      <!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
      HTTP Error 404 - Not Found
      <!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
      </a></h1>
    2. For unilingual French server message pages, the title must be in French:
      <h1><a name="cont" id="cont">
      <!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
      Erreur HTTP 404 - Non trouvé
      <!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
      </a></h1>
  7. Populate the content area with appropriate content. Consult Common Error Messages for a list of appropriate message titles and content.
    1. For unilingual English server message pages, the content must be in English.
    2. For unilingual French server message pages, the title must be in French.
  8. Replace the Date Modified | Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

6.7.2 Bilingual server message page templates

This template must be used for server messages of bilingual and multilingual sites where the language preference of the client is not known.

For institutions headquartered outside Quebec, these instructions apply to the srvmsg\srvmsg.html file. For institutions headquartered in Quebec, these instructions apply to the srvmsg\srvmsg-quebec.html file.

  1. Modify all image and CSS file paths in the server message page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
    1. ../images/
    2. ../css/
  2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the server message page template.
    1. The specified width and height must be consistent with the width and height for images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.15 (Adjusting the alignment of the FIP images).
    2. For institutions headquartered outside Quebec, the alt text must be the institution name in English, a space, a pipe, another space, followed by the institution name in French (for example, alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
    3. For institutions headquartered in Quebec, the alt text must be the institution name in French, a space, a pipe, another space, followed by the institution name in English (for example, alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
  3. Change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in English:
    1. Important Notices
  4. Change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in French:
    1. Avis importants
  5. Provide an appropriate title within the title element. The title must be bilingual. Consult Common Error Messages for a list of appropriate message titles and content.
    1. For institutions headquartered outside Quebec, the title must be the English title, a space, a pipe, another space, followed by the French title
      (for example, <title>HTTP Error 404 - Not Found | Erreur HTTP 404 - Non trouvé</title>).
    2. For institutions headquartered in Quebec, the title must be the French title, a space, a pipe, another space, followed by the English title
      (for example, <title>Erreur HTTP 404 - Non trouvé | HTTP Error 404 - Not Found</title>).
  6. Populate the content area titles with appropriate titles in English and French. The content area title should be consistent with the title provided within the title element (Step 5). Consult Common Error Messages for a list of appropriate message titles and content.
    1. For institutions headquartered outside Quebec, the content area title in the left column must be in English and the content area title in the right column must be in French.
    2. For institutions headquartered in Quebec, the content area title in the left column must be in French and the content area title in the right column must be in English.
  7. Populate the content area with appropriate content. Consult Common Error Messages for a list of appropriate message titles and content.
    1. For institutions headquartered outside Quebec, the content in the left column must be in English and the content in the right column must be in French.
    2. For institutions headquartered in Quebec, the content in the left column must be in French and the content in the right column must be in English.
  8. Replace the Date Modified | Date de modification values in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.0 How to use the configured content page templates

This section provides instructions to help authoring groups within the institution to use the content page templates that were installed and configured in section 6.0 (How to install and configure the templates). Instructions for using the Welcome Page template can be found in section 6.5 (Configuring and installing the Welcome Page template).

7.1 Content page template for bilingual and multilingual sites

This template must be used for all English and French content pages on bilingual and multilingual sites.

7.1.1 Selecting the templates

Select an English (*col-eng.html) and French (*col-fra.html) version of one of the configured content page templates according to the following requirements:

  • For the institution's primary menu page and all sub site main pages, the 3col*.html templates must be used.
  • For the rest of the pages on the site, either the 2col*.html or the 3col*.html templates may be used. The 2col*.html templates are recommended because they allow for shorter Web pages than the 3col*.html templates by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the 2col*.html templates, the 1col*.html templates should be used.
  • For Web applications, either the 2col*.html or the 3col*.html templates may be used. In cases where it is not possible to fit content within the content area of the 2col*.html templates, the 1col*.html templates should be used.

7.1.2 Creating a Web page from the selected templates

  1. Make local copies of the selected templates and change the filenames as required.
  2. Change the paths of the language selection links.
    1. For the English page, change the path of the Français link so that it links to the French version of the page.
    2. For the French page, change the path of the English link so that it links to the English version of the page.
  3. Populate the metadata elements with appropriate values
    1. For the English page, populate the metadata elements with English metadata.
    2. For the French page, populate the metadata elements with French metadata.
  4. Provide an appropriate title within the title element. The title must match the language of the page.
    1. For the English page, the title must be in English (for example, <title>Welcome to the Treasury Board of Canada Secretariat</title>).
    2. For the French page, the title must be in French (for example, <title>Bienvenue au Secrétariat du Conseil du Trésor du Canada</title>).
  5. Change the breadcrumb as required. All breadcrumb elements must be placed in between <p class="breadcrumb"> and the associated </p>.
    1. For the English page, all breadcrumb elements must be in English and any linked elements must link to English pages.
    2. For the French page, all breadcrumb elements must be in French and any linked elements must link to French pages.
  6. If either the 3col*.html or 2col*.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
  7. If the 3col*.html templates are being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that is not grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
  8. Populate the content area title with an appropriate title. The content area title should be consistent with the title provided within the title element (Step 4).
    1. For the English page, the content area title must be in English.
      <h1><a name="cont" id="cont">
      <!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
      Welcome to the Treasury Board of Canada Secretariat
      <!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
      </a></h1>
    2. For the French page, the content area title must be in French.
      <h1><a name="cont" id="cont">
      <!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
      Bienvenue au Secrétariat du Conseil du Trésor du Canada
      <!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
      </a></h1>
  9. Populate the content area with appropriate content in the language of the page. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
    1. For the English page, the content must be in English.
    2. For the French page, the content must be in French.
  10. Replace the Date Modified | Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

Top of Page

7.2 Content page template for unilingual English sites

This template must be used for all content pages on unilingual English sites.

7.2.1 Selecting the template

Select an English (uniling\*col-ul-eng.html) version of one of the configured content page templates according to the following requirements:

  • For the institution's primary menu page and all sub site main pages, the uniling\3col-ul-eng.html template must be used.
  • For the rest of the pages on the site, either the uniling\2col-ul-eng.html or the uniling\3col-ul-eng.html templates may be used. The uniling\2col-ul-eng.html template is recommended because it allows for shorter Web pages than the uniling\3col-ul-eng.html template by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the uniling\2col-ul-eng.html template, the uniling\1col-ul-eng.html template should be used.
  • For Web applications, either the uniling\2col-ul-eng.html or the 3col-ul-eng.html templates may be used. In cases where it is not possible to fit content within the content area of the 2col-ul-eng.html templates, the 1col-ul-eng.html templates should be used.

7.2.2 Creating a Web page from the selected template

Follow these steps to create a Web page from the selected template:

  1. Make a local copy of the selected template and change the filename as required.
  2. Populate the metadata elements with appropriate values in English.
  3. Provide an appropriate English title within the title element (for example, <title>Welcome to the Treasury Board of Canada Secretariat</title>).
  4. Change the breadcrumb as required. All breadcrumb elements must be in English, must be linked to English pages and must be placed between <p class="breadcrumb"> and the associated </p>.
  5. If either the 3col-eng.html or 2col-eng.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
  6. If the 3col-eng.html template is being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that are is grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
  7. Populate the content area title with an appropriate English title. The content area title should be consistent with the title provided within the title element (Step 4).

    <h1><a name="cont" id="cont">
    <!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
    Welcome to the Treasury Board of Canada Secretariat
    <!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
    </a></h1>
  8. Populate the content area with appropriate English content. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
  9. Replace the Date Modified value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.3 Content page template for unilingual French sites

This template must be used for all content pages on unilingual French sites.

7.3.1 Selecting the template

Select a French (uniling\*col-ul-fra.html) version of one of the configured content page templates according to the following requirements:

  • For the institution's primary menu page and all sub site main pages, the uniling\3col-ul-fra.html template must be used.
  • For the rest of the pages on the site, either the uniling\2col-ul-fra.html or the uniling\3col-ul-fra.html templates may be used. The uniling\2col-ul-fra.html template is recommended because it allows for shorter Web pages than the uniling\3col-ul-fra.html template by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the uniling\2col-ul-fra.html template, the uniling\1col-ul-fra.html template should be used.
  • For Web applications, either the uniling\2col-ul-fra.html or the 3col-ul-fra.html templates may be used. In cases where it is not possible to fit content within the content area of the 2col-ul-fra.html templates, the 1col-ul-fra.html templates should be used.

7.3.2 Creating a Web page from the selected template

Follow these steps to create a Web page from the selected template:

  1. Make a local copy of the selected template and change the filename as required.
  2. Populate the metadata elements with appropriate values in French.
  3. Provide an appropriate French title within the title element (for example, <title>Bienvenue au Secrétariat du Conseil du Trésor du Canada</title>).
  4. Change the breadcrumb as required. All breadcrumb elements must be in French, must be linked to French pages and must be placed between <p class="breadcrumb"> and the associated </p>.
  5. If either the 3col-fra.html or 2col-fra.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
  6. If the 3col-fra.html template is being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that are is grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
  7. Populate the content area title with an appropriate French title. The content area title should be consistent with the title provided within the title element (Step 4).

    <h1><a name="cont" id="cont">
    <!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
    Bienvenue au Secrétariat du Conseil du Trésor du Canada
    <!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
    </a>
  8. Populate the content area with appropriate French content. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
  9. Replace the Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.4 Content page template for languages other than English or French

This template must be used for content pages where the content is provided primarily in a language other than English or French.

For institutions headquartered outside Quebec, these instructions apply to the multiling\*col-ml-spa.html files. For institutions headquartered in Quebec, these instructions apply to the multiling\*col-ml-quebec-spa.html files.

7.4.1 Selecting the template

Select one of the configured content page templates according to the following requirements:

  • For the institution's primary menu page and all sub site main pages, the multiling\3col-ml*.html templates must be used.
  • For the rest of the pages on the site, either the multiling\2col-ml*.html or the multiling\3col-ml*.html templates may be used. The multiling\2col-ml*.html templates are recommended because they allow for shorter Web pages than the multiling\3col-ml*.html templates by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the multiling\2col-ml*.html templates, the multiling\1col-ml*.html templates should be used.
  • For Web applications, either the multiling\2col-ml*.html or the multiling\3col-ml*.html templates may be used. In cases where it is not possible to fit content within the content area of the multiling\2col-ml*.html templates, the multiling\1col-ml*.html templates should be used.

7.4.2 Creating a Web page from the selected template

Follow these steps to create a Web page from the selected template:

  1. Make local copies of the selected template and change the filenames as required.
  2. Change the paths of the language selection links.
    • Change the path of the Français link so that it links to the French version of the page.
    • Change the path of the English link so that it links to the English version of the page.
  3. Populate the metadata elements with appropriate values that match the language of the page.
  4. Provide an appropriate title within the title element. The title must match the language of the page (for example, <title>Bienvenido al Gobierno de Canadá</title>).
  5. Change the breadcrumb as required. All breadcrumb elements must be placed in between <p class="breadcrumb"> and the associated </p>.
    1. For the English breadcrumb, all breadcrumb elements must be in English and any linked elements must link to English pages.
    2. For the French breadcrumb all breadcrumb elements must be in French and any linked elements must link to French pages.
  6. If either the multiling\3col-ml*.html or multiling\2col-ml*.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
  7. If the multiling\3col-ml*.html templates are being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that is not grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
  8. Populate the content area title with an appropriate title that matches the language of the page. The content area title should be consistent with the title provided within the title element (Step 4).
    1. For institutions headquartered outside of Quebec:

      <h1><a name="cont" id="cont">
      <!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
      Bienvenido al Gobierno de Canadá
      <!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
      </a></h1>
    2. For institutions headquartered in Quebec:

      <h1><a name="cont" id="cont">
      <!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
      Bienvenido al Gobierno de Canadá
      <!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
      </a></h1>
  9. Populate the content area with appropriate content in the language of the page. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
  10. Replace the Date Modified | Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

Top of Page

8.0 Utility CSS classes defined by the template

Utility CSS classes provide a browser safe way to change font sizes, align text and create other visual effects. To use one of the utility classes with a container, include the class attribute in the container element and specify the desired class name as the attribute value.

for example, <p class="alignRight">Text to be right aligned</p>

8.1 Font size classes

These font size classes provide a simple, CLF-compliant and browser-safe way of modifying the font size of text. These classes should be used instead of custom font size classes (using the font or font-size properties) to ensure support for a wide range of browser platform combinations.

Below is a table containing the names of all the available classes and the resulting font size:

Class name Font size for most browsers Font size for legacy browsers Visual result
fontSize70 70% 7.0 pt Resulting font size
fontSize75 75% 7.5 pt Resulting font size
smallFont 75% 8.0 pt Resulting font size
fontSize80 80% 8.0 pt Resulting font size
fontSize85 85% 8.5 pt Resulting font size
mediumFont 85% 8.5 pt Resulting font size
fontSize90 90% 9.0 pt Resulting font size
fontSize95 95% 9.5 pt Resulting font size
fontSize100 100% 10.0 pt Resulting font size
fontSize105 105% 10.0 pt Resulting font size
fontSize110 110% 10.5 pt Resulting font size
h6Size 110% 10.5 pt Resulting font size
fontSize115 115% 11.0 pt Resulting font size
fontSize120 120% 11.5 pt Resulting font size
h5Size 120% 11.5 pt Resulting font size
fontSize125 125% 12.0 pt Resulting font size
fontSize130 130% 13.0 pt Resulting font size
h4Size 130% 13.0 pt Resulting font size
fontSize135 135% 13.0 pt Resulting font size
big 140% 13.5 pt Resulting font size
fontSize140 140% 13.5 pt Resulting font size
h3Size 140% 13.5 pt Resulting font size
fontSize145 145% 13.5 pt Resulting font size
fontSize150 150% 14.0 pt Resulting font size
h2Size 150% 14.0 pt Resulting font size
fontSize155 155% 14.5 pt Resulting font size
fontSize160 160% 15.0 pt Resulting font size
h1Size 160% 15.0 pt Resulting font size
fontSize165 165% 16.0 pt Resulting font size
fontSize170 170% 16.5 pt Resulting font size
fontSize175 175% 17.0 pt Resulting font size
fontSize180 180% 17.5 pt Resulting font size
fontSize185 185% 18.0 pt Resulting font size
fontSize190 190% 19.0 pt Resulting font size
fontSize195 195% 19.5 pt Resulting font size
fontSize200 200% 20.0 pt Resulting font size

8.2 Width classes

These width classes provide a simple, CLF-compliant and browser-safe way of specifying the width of a container.

Below is a table containing the names of all the available classes and the resulting widths:

Class name Width
widthFull 98.5%
width95 95%
width90 90%
width85 85%
width80 80%
width75 75%
width70 70%
width65 65%
width60 60%
width55 55%
width50 50%
width45 45%
width40 40%
width35 35%
width30 30%
width25 25%
width20 20%
width15 15%
width10 10%
width5 5%

8.3 Indentation classes

These indentation classes provide a simple, CLF-compliant and browser-safe way of specifying the indentation of a container.

Below is a table containing the names of all the available classes and the resulting indentation:

Class name Indent size Visual result
indent1 18 Resulting indent
indent2 36 Resulting indent
indent3 54 Resulting indent
indent4 72 Resulting indent
indent5 90 Resulting indent

8.4 Alignment classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying the alignment of block-level objects.

Below is a table containing the names of all the available classes and the resulting alignment:

Class
name		 Horizontal
Alignment		 Vertical
Alignment		 Visual
results
alignLeft

Left Default (baseline) Resulting alignment
alignCenter

Centre Default  (baseline) Resulting alignment
alignRight

Right Default (baseline) Resulting alignment
alignTop

Default (Left) Top Resulting alignment
alignBottom

Default (Left) Bottom Resulting alignment
alignTopLeft

Left Top Resulting alignment
alignTopCenter

Centre Top Resulting alignment
alignTopRight

Right Top Resulting alignment
alignBottomLeft

Left Bottom Resulting alignment
alignBottomCenter

Centre Bottom Resulting alignment
alignBottomRight

Right Bottom Resulting alignment

8.5 Float classes

These float classes provide a simple, CLF-compliant and browser-safe way of wrapping text around objects such as images and tables. This is accomplished by applying one of these classes to the image or table that the text should wrap around.

Below is a table containing the names of all the available classes and the resulting float/alignment:

Class
name		 Float Vertical
Alignment
floatLeft Left Default (baseline)
floatRight Right Default (baseline)
image-left Left text-top
image-right Right text-top

Top of Page

8.6 Unordered list classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying bullets for unordered lists (ul). This is accomplished by applying one of these classes to the ul element of an unordered list.

Below is a table containing the names of all the available classes and the resulting bullets:

Class
name		 Bullet type Visual result
noBullet None
  • Resulting bullet
disc Disc
  • Resulting bullet
square Square
  • Resulting bullet
circle Circle
  • Resulting bullet

8.7 Ordered list classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying the numbering system for ordered lists (ol). This is accomplished by applying one of these classes to the ol element of an ordered list.

Below is a table containing the names of all the available classes and the resulting numbering systems:

Class
name		 Bullet type Visual result
lower-alpha Lower-case alphabetic
  1. Resulting bullet
upper-alpha Upper-case alphabetic
  1. Resulting bullet
lower-roman Lower-case roman numerals
  1. Resulting bullet
upper-roman Upper-case roman numerals
  1. Resulting bullet

8.8 Colour classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying the foreground and background colours.

Below is a table containing the names of all the available classes and the resulting colours:

Class Name Foreground colour Background colour Visual result
black #000000 Transparent Resulting colour
blue #0000FF Transparent Resulting colour
deepyellow #FFCC33 Transparent Resulting colour
green #009933 Transparent Resulting colour
grey #999999 Transparent Resulting colour
red #FF0000 Transparent Resulting colour
white #FFFFFF Transparent Resulting colour
blackBG Default #000000 Resulting colour
blueBG Default #0000FF Resulting colour
deepyellowBG Default #FFCC33 Resulting colour
greenBG Default #009933 Resulting colour
lightgreyBG Default #CCCCCC Resulting colour
redBG Default #FF0000 Resulting colour
whiteBG Default #FFFFFF Resulting colour

8.9 Miscellaneous classes

These alignment classes provide a simple, CLF-compliant and browser-safe way of specifying miscellaneous visual effects.

Below is a table containing the names of all the available classes and the resulting visual effects:

Class Name Purpose Visual result
compress Sets the top and bottom margins to zero, reducing the vertical white space when used with the following block-level elements: p, h1, h2, h3, h4, h5, h6, ul, and ol. Before:
Regular text.

Text in a "p" element.

Regular text.

After:
Regular text.

Text in a "p" element using the "compress" class.

Regular text.
doubleLineSpace Visually specifies double line spacing for text in the container. Visual result, visual result, visual result, visual result.
headline Sets the top and bottom margins to zero and reduces the text size for headings (h1 to h6). This results in a reduction of the vertical white space and the font size. This class will also prevent the underlining of any links using this class unless the link is in focus. Before:
Regular text

Text in an "h2" element.

Regular text

Before:
Regular text

Text in an "h2" element using the "headline" class.

Regular text
highlight Applies a border, a background colour and padding to a container.
Visual result
lowercase Visually transforms the text in the container to lowercase.
Visual result
noWrap Prevents the text in the container from wrapping.  
uppercase Visually transforms the text in the container to uppercase. Visual result
wrap Used to allow floating of content to the right of the content area h1 in Internet Explorer.

Note: This class should only be used when content is being floated to the right of the content area h1. Use of this class under any other circumstances may result in display issues with the content area border.		 Visual result
wrapContainer Used to control the wrapping of text around images and tables. See Wrapping text around images and tables for more details.  

9.0 Client-side CSS for enhancing accessibility

CLF standards require a specific visual design, which may require a workaround to enhance accessibility where circumstances warrant. The template's design is flexible enough to allow clients to configure the visual presentation to meet their accessibility needs by using client-side CSS.

Most browsers provide the ability to specify a custom style sheet, which would be applied to every Web page that a client visits. To take advantage of this feature, clients need only to create a custom style sheet and to instruct the browser to use it.

To create a custom style sheet, a client would require knowledge of both CSS and how pages are developed. There are many custom style sheets available on the Internet to improve accessibility of Web pages in general, but to create a custom style sheet that enables specific accessibility features in this template would most likely be too difficult for most clients.

To make it easier for clients to enhance the accessibility of Web pages using the GC CLF template, client-side CSS were developed that can easily be included in custom style sheets. These client-side CSS should be made available on the institutional help page for clients to download.

9.1 Visible skip navigation links

To meet visual design requirements, it was necessary to make the skip navigation elements invisible. This approach does not affect clients using a screen reader but does make it more difficult for clients using only a keyboard to take advantage of the skip navigation elements. The skip navigation elements are still available to clients using a keyboard (they can be reached by tabbing) but the links are more difficult to select because they are invisible.

Although CLF does not allow the skip navigation links to be visible by default, clients can make the skip navigation links visible by including the following client-side CSS in their custom style sheets:

div.navaid {
      position: static !important;
      font-size: 100% !important;
      float: none !important;
      overflow: visible !important;
      width: auto !important;
      height: auto !important;
      max-width: auto !important;
      margin-left: 0px !important;
      margin-right: 0px !important;
      padding-left: 0px !important;
      color: #000 !important;
}
div.navaid a {
      color: #00F !important;
      padding: 5px !important;
      line-height: 150% !important;
      border: none !important;
      position: static !important;
      zoom: 0 !important;
}
div.page div.core div.navaid a:hover,
div.page div.core div.navaid a:active,
div.page div.core div.navaid a:focus {
      color: #00F !important;
      border: none !important;
      background-color: #FFF !important;
}

9.2 Expandable page

To meet visual design requirements, it was necessary to fix the width of the template at 760 pixels. For some clients, an expandable template improves accessibility and/or usability.

Although CLF does not allow the template to be expandable by default, clients can make Web pages using the template expandable by including the following client-side CSS in their custom style sheets:

div.page {
      width : 100% !important;
}

9.3 Underline all links

To meet visual design requirements, it was necessary to remove the underlining of links in the side menu and the common menu bar.  Some clients may have difficulty recognizing links that are not underlined or may prefer that all links be underlined regardless of the impact on visual design.

Although CLF does not allow the side menu and common menu bar links to be underlined by default, clients can force all links to be underlined by including the following client-side CSS in their custom style sheets:

a:link, a:visited, a:hover, a:active, a:focus{
      text-decoration: underline !important;
}

9.4 Consistent link colours

To meet visual design requirements, it was necessary to specify different link foreground and background colours in some areas of the page. Some clients may have difficulty identifying links when the colour scheme is not consistent throughout the page.

Although CLF does not allow the foreground and background colour to be the same for all links by default, clients can force all links to have the same foreground and background colours by including the following client-side CSS in their custom style sheets:

a:link, a:visited, a:hover a:active, a:focus {
      background-color: #FFF !important;
      font-weight: normal !important;
      font-style: normal !important;
      font-variant: normal !important;
      padding: 0px 0px 2px 2px !important;
}
a:link {
      color: #00F !important;
}
a:visited {
      color: #009 !important;
}
a:hover a:active, a:focus {
      color: #F00 !important;
}

In the above example, the colours can be modified and are assigned as follows:

Link property Class name Class property Colour (hex) Colour
Background colour a:link, a:visited, a:hover a:active, a:focus background-color #FFF White
Normal link colour a:link color #00F Blue
Visited link colour a:visited color #009 Dark Blue
Hover/active/focus link colour a:hover a:active, a:focus color #F00 Red

Top of Page

9.5 High contrast content page banner

To meet both visual design and accessibility requirements for the content page banner, to the template displays the foreground text either over a background colour or a background image. Depending on the current font size and the colours used, the contrast between the foreground text and the background may not be sufficient for certain clients.

Clients can ensure a high contrast content page banner by disabling the background colour or image and specifying a high contrast foreground and background colour combination. This can be achieved by including the following client-side CSS in their custom style sheets:

div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div-banner-lfcoa-fra {
      background: none !important;
      border-top: 1px solid #000 !important;
      border-left: 1px solid #000 !important;
      border-right: 1px solid #000 !important;
      min-height: 5.58em !important;
      margin-top: 3.14em !important;
      padding-bottom: 0.67em !important;
}
* html img.coa, * html img.lf {
      margin-top: -2.84em !important;
}
div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div-banner-lfcoa-fra img.coa, div-banner-lfcoa-fra img.lf {
      display: inline !important;  
}
div.banner-eng p.main, div-banner-fra p.main, div.banner-lfcoa-eng p.main, div-banner-lfcoa-fra p.main, div.banner-eng p.siteuri, div-banner-fra p.siteuri, div.banner-lfcoa-eng p.siteuri, div-banner-lfcoa-fra p.siteuri {
      position: static !important;
      font-size: 100% !important;
      float: none !important;
      overflow: visible !important;
      width: auto !important;
      height: auto !important;
}
div.banner-eng p.main, div.banner-fra p.main, div.banner-lfcoa-eng p.main, div.banner-lfcoa-fra p.main {
      font-family: "times new roman", sans-serif !important;
      font-weight: bold !important;
      font-size: 185% !important;
      margin: 0 !important;
      padding: 0 !important;
}
div.banner-eng p.siteuri, div-banner-fra p.siteuri, div.banner-lfcoa-eng p.siteuri, div-banner-lfcoa-fra p.siteuri {
      font-family: Arial, Helvetica, sans-serif !important;
      background-color: transparent !important;
      font-weight: lighter !important;
      font-size: 110% !important;
      margin: 0 !important;
      padding: 0 !important; 
}
p.main, p.main span, p.siteuri, p.siteuri span {
      color: #000 !important;
}
* html p.main, * html p.main span, * html p.siteuri, * html p.siteuri span {
      width: 99.5% !important;
}
p.main img, p.siteuri img {
      display: none !important;
}

9.6 High contrast Welcome Page message area

To meet both visual design and accessibility requirements for the Welcome Page message area, the template displays the foreground text over both a background colour and a background image. Depending on the current font size and the colours used, the contrast between the foreground text and the background may not be sufficient for certain clients.

Clients can ensure a high contrast Welcome Page message area by disabling the background colour, disabling the background image and specifying a high contrast foreground and background colour combination. This can be achieved by including the following client-side CSS in their custom style sheets:

div.msgarea, div.msgareaalt {
      background: none !important;
      border-top: 1px solid #000 !important;
      border-left: 1px solid #000 !important;
      border-right: 1px solid #000 !important;
}
div.msgareaalt {
      border-bottom: 1px solid #000 !important;
}
* html div.msgarea, * html div.msgareaalt {
      width: 99.7% !important;
}
* html div.msgarea {
      height: 129px !important;
}
* html div.msgareaalt {
      height: 248px !important;
}
div.msgarea h1, div.msgareaalt h1 {
      color: #000 !important;
}
div.msgarea h1.hidden, div.msgareaalt h1.hidden {
      position: static !important;
      font-size: 200% !important;
      float: none !important;
      overflow: visible !important;
      width: 100% !important;
      height: auto !important;
      font-weight: bold !important;
}
div.headcontainer {
      background-color: #FFF !important;
      color: #000 !important;
      border: 1px solid #000 !important;
}
* html div.headcontainer {
      width: 99.7% !important;
      height: 118px !important;
}

9.7 High contrast hover/active/focus links

To meet both visual design and accessibility requirements for the Welcome Page message area, the template does not change the background colour of links when a mouse pointer hovers over top or when selected using a keyboard or other alternate input device. Depending on how the browser highlights links, the current font size, and the colours used, some clients may have difficulty determining which link they are about to select.

Clients can make it easier to determine which link they are about to select by specifying a foreground and background colour for links when a mouse pointer hovers over top or when selected using a keyboard or other alternate input device. This can be achieved by including the following client-side CSS in their custom style sheets:

a:hover, a:active, a:focus {
      color: #000 !important;
      background-color: #FFF !important;
}

In the above example, the colours can be modified and are assigned as follows:

Link property Class Name Class property Colour (hex) Colour
Hover/active/focus link colour a:hover, a:active, a:focus color #000 Black
Background colour a:hover, a:active, a:focus background-color #FF0 Yellow

 

10.0 Progressive Enhancement

Canadians have the right to obtain information and services from Government of Canada Web sites regardless of the technologies they use. The key to effective implementation of universal accessibility lies in designing sites to serve the widest possible audience and the broadest possible range of hardware and software platforms, from adaptive technologies to emerging technologies.

In the past, the graceful degradation approach was used to ensure the widest possible audience was being served. The graceful degradation approach involves designing a Web site for one or more target configurations, then including functional but degraded support for other configurations. The graceful degradation approach works well when designing a basic template, but it can be problematic since it tends to limit the introduction of emerging technologies and enhanced interface options to ensure compatibility with adaptive technologies and other configurations.

As a result of these limitations, there has been a shift in recent years away from the graceful degradation approach towards the progressive enhancement approach for embedded multimedia and other Web page enhancements. The progressive enhancement approach involves designing Web content for the least capable configurations first, and then introducing a series of enhancements based on the capability of each client’s configuration. This approach is an improvement over graceful degradation because it encourages the introduction of emerging technologies and enhanced interface options without compromising the support for less capable configurations.

10.1 Display of title values for links with keyboard focus

For many years, browsers have included the ability to display the title value for links to improve both accessibility and usability. For most browsers, the display of the title value is triggered when a mouse pointer hovers over a link. Unfortunately the display is not triggered when a link gains keyboard focus resulting in the feature only being available to clients using a mouse.

This issue has been resolved by implementing a progressive enhancement-based JavaScript approach to display the title value when a link gains keyboard focus. This approach duplicates the title value display that is triggered when a mouse pointer hovers over a link. This feature was introduced in version 1.04 of the GC CLF template to enhance both accessibility and usability for clients that are not using a mouse.

10.2 PNG Alpha Transparency Support in Internet Explorer 5.5 and 6.0

Images with transparent sections are frequently used to seamlessly blend images with a wide range of backgrounds. The most widely supported image formats with transparency support are GIF and PNG. Although both formats include transparency support, the alpha transparency approach of the PNG format will result in far superior blending with a wide range of backgrounds than the limited binary transparency approach of the GIF format.

Browsers have included support for the PNG format for many years, but unfortunately Internet Explorer did not introduce alpha transparency support for the PNG format until version 7.0. Fortunately all other browsers that support the PNG format also support alpha transparency, and the alpha transparency support for PNG files can be enabled in Internet Explorer 5.5 and 6.0 using the AlphaImageLoader filter. The problem with the AlphaImageLoader filter is that it can be very complicated to use without compromising CLF compliance and browser support.

This issue has been resolved by implementing a progressive enhancement-based JavaScript approach to allow alpha transparency support in Internet Explorer 5.5 and 6.0 to be enabled for specific PNG files. This feature was introduced in version 1.03 of the GC CLF template to enhance the appearance of the banner leaf and to provide a CLF-compliant and browser-safe approach for enabling alpha transparency support for PNG files in Internet Explorer 5.5 and 6.0.

10.2.1 How to enable alpha transparency support for specific PNG files

The following are the steps for enabling alpha transparency support in Internet Explorer 5.5 and 6.0 for specific PNG files:

  1. Use version 1.03 or later of the GC CLF template.
  2. Create a GIF and PNG version of an image that includes transparent sections. The files must have the same file name except for the ".gif" and ".png" file extensions (for example, "lffl.gif" and "lffl.png").
  3. Place the GIF and PNG versions of the image in the same directory.
  4. Create an img element in the Web page with the path to the GIF version of the image for the src attribute value and "pngfix" for the class attribute value (for example, <img src="images/lffl.gif" class="pngfix" height="65" width="65" alt="..." />).
  5. If the img element needs to reference a specific CSS class, then add the CSS class name and a space immediately before "pngfix" (for example, <img src="images/lffl.gif" class="lf pngfix" height="65" width="65" alt="..." />).

When the page loads, the progressive enhancement-based JavaScript approach will:

  1. load the PNG version of the image for browsers with native alpha transparency support,
  2. load the AlphaImageLoader filter to display the PNG version of the image with alpha transparency support for Internet Explorer 5.5 and 6.0,
  3. load the GIF version of the image for all other browsers.

10.3 Multimedia player

The multimedia player was introduced in version 1.04 of the GC CLF template to provide a simple and easy to implement solution that would enable developers to deploy multimedia formats in an accessible manner. The player was designed to be compatible with a wide range of adaptive technologies and uses the progressive enhancement approach to ensure the player does not interfere with configurations that do not support the player. The player is scalable, includes closed captioning support, and can load several multimedia formats.

The multimedia player, although accessible, is only a component of a complete multimedia solution. A complete and accessible multimedia solution is comprised of transcripts, and additional captioned media formats (such as .wmv, .mov, and .mpeg). These additional formats ensure as wide an audience as possible is able to take advantage of a media-rich version.

10.3.1 Configuring the multimedia player script file

The GC CLF template includes a multimedia player script file named ca.gc.mp-jm.js which is located in the scripts directory. The loadMedia function near the end of this file must be configured by a webmaster to enable the player to be functional. Additional configured options are described in section 10.3.3 (FlashVars).

The following are the steps for configuring the loadMedia function in the ca.gc.mp-jm.js file:

  1. Specify the path to the mp-jm.swf file for the "mediaplayerUrl" variable.

    var mediaplayerUrl = "http://<url>/mp-jm.swf" ;

  2. Specify the default language for the player for the "pLang" variable. The value in quotes must be "fra" for institutions headquartered in Quebec, and "eng" for institutions headquartered outside of Quebec.

    var pLang = ( pLanguage ) ? pLanguage : "fra" ;

  3. Specify the path to the image file for the "logo" variable. The image file will be displayed as a watermark in the bottom right corner of the player when audio files are being played. All image formats are supported but transparent PNG files are recommended.

    var logo = "http://<url>wmms.png" ;

10.3.2 Implementing the multimedia player on a Web page

Once the multimedia script file has been configured by the webmaster, and the necessary template files have been installed, developers can implement the multimedia players on their pages with only a small number of changes.

The following are the steps for implementing the multimedia player solution on a Web page:

  1. Use version 1.04 or later of the GC CLF template.
  2. Include the "multimedia" parameter in the progressive enhancement section of the Web page. The value for "multimedia" must be "active".

    var params = {
          lng:"eng",
          pngfix:"images/inv.gif",
          multimedia: "active"
    };

  3. Create the following in either the content area or the right side menu of the Web page:
    1. Create a div element with a unique value for the id attribute value (such as "mediacontainer"):

      <div id="mediacontainer">
      ...
      </div>

    2. Within the div element, create a link to the transcript and alternate formats, create a script element, and create a noscript element. The link must include a clear description of the target of the link for the title attribute value, the script element must include "text/javascript" for the type attribute value, and the noscript element should include "smallFont" for the noscript element.

      <div id="mediacontainer">
            <a href="/af-fr/af-fr.html" title="Transcript and alternate formats for ...">
            ...
            </a>
            <script type="text/javascript">
            ...
            </script>
            <noscript class="smallFont">
            ...
            </noscript>
      </div>

    3. Within the link, create an img element for the image that will be displayed if the player does not load. The img element must include an appropriate text equivalent for the alt attribute value.

      <a href="/af-fr/af-fr.html" title="Transcript and alternate formats for ...">
            <img src="images/wm-ms.gif" width="83" height="20" alt="Symbol of the Government of Canada" />
      </a>

    4. Within the script element, create the loadMedia function call, specify the containerId, file, captions, image, and lang parameters and optionally the height and width parameters. The containerId parameter must be the same as the value specified for the id attribute in step 3a (such as "mediacontainer") while the purpose of the remaining parameters is described in section 10.3.3.1 (Runtime configurable FlashVars).

      <script type="text/javascript">
            //<![CDATA[
            loadMedia('mediacontainer', '<file>', '<captions>', '<image>', '<lang>'[, <height>, <width>] );
            //]]>
      </script>

    5. Within the noscript element, create the text that will be displayed if the player does not load. The text should be wrapped with the p element.

      <noscript class="smallFont">
            <p>In order to maximize the functionality of this page, please enable JavaScript.</p>
      </noscript>

    6. The following is an example of the code that should be in the content area or the right side menu of the Web page:

      <div id="mediacontainer">
            <a href="/af-fr/af-fr.html" title="Transcript and alternate formats for TV Ad Traffic Jam">
                 <img src="images/wm-ms.gif" width="83" height="20" alt="Symbol of the Government of Canada" />
            </a>
            <script type="text/javascript">
                 //<![CDATA[
                 loadMedia('mediacontainer', 'http://<url>/af-fr.flv', 'http://<url>/af-fr-eng.xml', 'http://<url>/af-fr.png', 'eng');
                 //]]>
            </script>
            <noscript class="smallFont">
                 <p>In order to maximize the functionality of this page, please enable JavaScript.</p>
            </noscript>
      </div>

10.3.3 FlashVars

FlashVars are configuration options that can be included in the loadMedia function of the ca.gc.mp-jm.js file to control the appearance and the behaviour of the player. FlashVars should only be configured by the webmaster using the following format:

so.addVariable("<FlashVar>", "<value>");
(for example, so.addVariable("enablejs","true");)

10.3.3.1 Runtime configurable FlashVars
Name Values Mandatory Default Description
file <url> Yes n/a Specifies the location of the file to play.
captions <url> Yes n/a Specifies the location of the xml-based captions file using the SMIL Timed Text format.
image <url> Yes n/a Specifies the image to display when playing MP3 or FLV files. This FlashVar can also be used to display a preview image for other formats. Supported formats are JPG, SWF, PNG, and GIF.
lang eng, fra Yes n/a Specifies the language of the player.
height <number> No 160 Specifies the height of the player.
width <number> No 195 Specifies the width of the player.
10.3.3.2 Display FlashVars
Name Values Default Description
showicons true, false true Controls whether or not the play and activity icons are visible in the middle of the player display area.
overstretch true, false,fit, none fit Controls how the images and videos should be stretched to fit the player display area.
  • "true": Scale images and videos proportionately to fill the player display area.
  • "false": Scale images and videos proportionately to fit the player display area.
  • "fit": Scale images and videos disproportionately to exactly fit the height and width of the player display area.
  • "none": Maintain the original dimensions of the images and videos.
logo <url> n/a Specifies the location of the image file to be displayed as a watermark in the bottom right corner of the player display area. All image formats are supported but transparent PNG files are recommended.
showeq true, false false (true for MP3 files) Controls whether or not an equalizer is included in the player display area. The equalizer is ideally suited for MP3 files.
10.3.3.3 Interaction FlashVars
Name Values Default Description
callback <url> n/a Specifies the location of a server side script (PHP/ASP) that can process call-backs. The player will send a call-back every time an item starts or stops, so this feature provides a means to record statistics.
enablejs true, false false Controls whether or not JavaScript interaction is enabled. JavaScript interaction enables playback control, asynchronous loading of media files, and the monitoring of track information using JavaScript.

Note: JavaScript interaction will only work when the player is run remotely.
10.3.3.4 Playback FlashVars
Name Values Default Description
autostart true, false false Controls whether or not the player automatically starts playing when the page loads.
volume <number> 80 Controls the playback volume of media files.
bufferlength <number> 5 Controls the number of seconds an FLV file should be buffered before playback begins. Smaller values should be used for fast connections and short videos while larger values should be used for slow connections.

10.4 Initiative link slideshow

The initiative link slideshow was introduced in version 1.04 of the GC CLF template to provide a visual enhancement that was designed to save valuable real estate by allowing multiple initiative link images to share the same location on the page. The slideshow combines an elegant design with accessible controls for an end result that is both visually pleasing and fully accessible.

The default behaviour of the slideshow is to rotate initiative link images automatically at a pre-defined speed. The slideshow includes controls that enable clients to stop/start the rotation and to manually rotate the initiative links. The slideshow also provides the ability to control how frequently specific initiative link images are displayed in comparison to the other initiative link images.

10.4.1 How to enable the initiative link slideshow

The following are the steps for enabling the initiative link slideshow:

  1. Use version 1.04 or later of the GC CLF template.
  2. Use initiative link images that are 195 pixels wide by 70 pixels high.
  3. Include the "slideshow", "slideshowspeed" and "slideshowlib" parameters with appropriate quoted values for the declaration of the "params" JavaScript variable in the progressive enhancement section of the Web page. The value for "slideshow" must be "slideshow", the value for "slideshowspeed" must be the number of seconds that an initiative link image will be displayed, and the value for "slideshowlib" must be the path to the directory containing the required slideshow images.

    var params = {
          lng:"eng",
          pngfix:"images/inv.gif",
          slideshow: "slideshow",
          slideshowspeed: "8",
          slideshowlib: "images/sshw-mdiap"
    };

  4. Create the following in the right side menu of the Web page:
    1. Create a ul element with "nav" for the class attribute value and "slideshow" for the id attribute value:

      <li>
            <h2 class="nav">Features</h2>
            <ul class="nav" id="slideshow">
            ...,br />       </ul>
      </li>

    2. Within the ul element, create an li element with "menucontent" for the class attribute value for each initiative link. See section 10.4.3 (How to make specific initiative link images appear more frequently) for instructions on how to use the class attribute to control the frequency of specific initiative link images.

      <ul class="nav" id="slideshow">
            <li class="menucontent">
            ...
            </li>
            <li class="menucontent">
            ...
            </li>
      </ul>

    3. Within each li element, create two links separated by a br element. Both links must target the same location and must include title attribute values that are appropriate text equivalents for the initiative link image.

      The first link must include an img element with the path to the initiative link image for the src attribute value and an alt attribute value that is consistent with the title attribute value for the link. The second link must include "menulink" for the class attribute value.

      <li class="menucontent">
            <a title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/"><img src="images/navy-marine-eng.jpg" alt="Experience the Navy - Canadian Forces Recruiting" width="195" height="70" /></a>
            <br />
            <a class="menulink" title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/">Canadian Forces Recruiting</a>
      </li>

    4. The following is an example of the code that should be in the right side menu of the Web page:

      <ul class="nav" id="slideshow">
            <li class="menucontent">
                 <a title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/"><img src="images/navy-marine-eng.jpg" alt="Experience the Navy - Canadian Forces Recruiting" width="195" height="70" /></a>
                 <br />
                 <a class="menulink" title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/">Canadian Forces Recruiting</a>
            </li>
            <li class="menucontent">
                 <a title="Budget 2007" href="/budget07/menu-eng.html"><img src="images/budget07-eng.jpg" alt="Budget 2007" width="195" height="70" /></a>
                 <br />
                 <a class="menulink" title="Budget 2007" href="/budget07/menu-eng.html ">Budget 2007</a>
            </li>
      </ul>

10.4.2 How to change the slideshow speed

The slideshow speed is controlled using the "slideshowspeed" parameter in the declaration of the "params" JavaScript variable in the progressive enhancement section of the Web page. The "slideshowspeed" value represents the number of seconds that an initiative link image will be displayed. In other words, the lower the value, the faster the slideshow speed.

var params = {
      lng:"eng",
      pngfix:"images/inv.gif",
      slideshow: "slideshow",
      slideshowspeed: "8",
      slideshowlib: "images/sshw-mdiap",
};

10.4.3 How to make specific initiative link images appear more frequently

The frequency that specific initiative link images appear in the slideshow can be controlled through the class attribute of the associated li element. To increase the frequency of a specific initiative link image, add a space to the class attribute value followed by one of the following keywords:

Keyword Effect on the image Example
ss-double Appears twice as often in the slideshow. <li class="menucontent ss-double">
ss-triple Appears three times as often in the slideshow. <li class="menucontent ss-triple">

 

11.0 Supported adaptive technologies

The GC CLF template was tested extensively using screen magnification software, screen reading software, voice-recognition software, alternate input and rate enhancement systems, text-based browsers, small-screen emulators and custom client configurations.

11.1 Screen magnification system

Screen magnification software allows clients to enlarge either the full screen or a portion of the screen. Screen magnification software also provides additional features such as colour inverting, font smoothing and pointer enhancements.

The template was successfully tested with the following screen magnification software:

  • IBM Home Page Reader 3.04
  • MAGic 6.2, 8.02, 9.5
  • PWWebSpeak 3.0r4
  • Lunar Screen Magnifier 6.0, 6.5, 7.0, 8.0
  • Supernova Reader Magnifier 6.0, 6.5, 7.0, 8.0
  • System Access (formerly FreedomBox) 2.0, 2.2
  • Web LV 3.03
  • ZoomText 7.11, 8.1, 9.0

11.2 Screen reading systems

Screen reading systems are used to render information through a synthesized voice output or a refreshable Braille display. Screen reading software is able to render both text displayed on the screen and any keystrokes entered on the keyboard

The template was successfully tested with the following screen reading systems:

  • Hal Screen Reader 6.0, 6.5, 7.0, 8.0
  • IBM Home Page Reader 3.04
  • JAWS for Windows 4.0, 4.51, 5.10, 6.0, 6.2, 7.0, 7.1, 8.0
  • PWWebSpeak 3.0r4
  • Supernova Reader Magnifier 6.0, 6.5, 7.0, 8.0
  • System Access (formerly FreedomBox) 2.0, 2.2
  • Web LV 3.03
  • Window-Eyes 4.0, 5.0, 5.5

11.3 Voice-recognition software

Voice-recognition software allows clients to perform tasks by using their voice to emulate keyboard and mouse commands.

The template was successfully tested with the following voice-recognition software:

  • Dragon Naturally Speaking Pro 7.1, 8.0, 9.0
  • FreedomBox 2.0, 2.2

11.4 Text-based browsers

Text-based browsers are often used by clients with visual impairments to display Web pages as text. Text-based browsers behave like screen reader software by rendering content in a linear fashion.

The template was successfully tested with the following text-based browsers:

  • Lynx 2.8.4
  • MacLynx b1

11.5 Small-screen emulators

Small-screen emulators are used to simulate the display of Web pages on small-screen devices such as mobile phones, personal digital assistants and other handheld devices.

The template was successfully tested with the following small-screen emulators:

  • Deckit-1.2.4 (mobile phone emulator)
  • Opera Small Screen rendering (handheld device emulator)

11.6 Custom client configurations

Clients can enhance accessibility by modifying the visual preferences in their browsers and operating systems. These custom client configurations can be used in combination with adaptive technologies to further enhance accessibility.

11.6.1 Internet Explorer 6.x custom client configurations

The custom client configurations listed in this section were used with all three Internet Explorer accessibility checkboxes selected.

11.6.1.1 Windows appearances

Customizing the default colour scheme and font size for an operating system can enhance the accessibility of both the operating system and software applications.

The template was successfully tested with the following Windows operating system schemes and font sizes:

Scheme Font size
Low Contrast Low Luminosity Normal
Low Contrast Mid Luminosity Normal
High Contrast Black Normal
High Contrast Black Large
High Contrast Black Extra Large
High Contrast White Normal
High Contrast White Large
High Contrast White Extra Large
High Contrast Blue Normal
Standard Aphont Readable Desktop Normal
High Contrast Black Aphont Readable Desktop Normal
11.6.1.2 Formatted with a custom style sheet

Many browsers provide clients the ability to format Web pages using a custom style sheet. Custom style sheets give clients control over the visual presentation of Web pages, allowing clients to enhance accessibility by modifying colours, font sizes, and other visual properties.

The template was successfully tested with the following custom style sheets:

  • V1.0 Ultra Small White
  • V1.0 Object Highlighting Standard
  • V1.0 Object Highlighting Black
  • V1.0 High Contrast Black Normal
  • V1.0 High Contrast Black Large
  • V1.0 High Contrast Black X-Large
  • V1.0 High Contrast Black 3X-Large
  • V1.0 High Contrast White Normal
  • V1.0 High Contrast White Large
  • V1.0 High Contrast White X-Large
  • V1.0 High Contrast White 3X-Large
  • V1.0 High Contrast Blue

11.6.2 Mozilla Firefox 1.5 custom client configurations

The template was successfully tested with the following Mozilla Firefox 1.5 custom client configurations:

  • Minimum font size: 10pt, 16pt, 18pt, 24pt
  • "allow pages to choose their own colors": unchecked
  • High Contrast Black Scheme

11.6.3 Excluded features

In order to ensure readability and backwards compatibility, the template was tested with several standard browser features excluded, both individually and in combination.

The template was successfully tested with the following features excluded, both individually and in combination:

  • Images
  • Tables
  • Blink
  • Frames
  • Font
  • Body (such as bgcolor, and link)
  • Center
  • Applet (Java)
  • Script (JavaScript)
  • Style Sheets (CSS)
  • Marquee

11.6.4 Keyboards and alternate input access devices

Not all clients are able to use conventional keyboard and mouse systems as input devices. Some clients are limited to using a keyboard because a mouse is not available or because the client is unable to use a mouse. Some clients may require alternate input access devices because they are unable to use conventional keyboards.

Full navigation of the template was successfully tested with the following keyboards and alternate input access devices:

  • Point & Click v1.x + Screen Doors v2 + Internet Explorer 6.x
  • MouseTool + v1.0 High Target Area (CSS)
  • Standard 101 AT keyboard + Internet Explorer 5.x
  • Standard 101 AT keyboard + Mozilla Firefox 1.5 + Accessibility extension

Top of Page

12.0 Supported browser/platform combinations

To ensure a high level of browser support, the template was tested extensively with a wide range of browser/platform combinations.

12.1 Summary

  • The template was tested successfully with 108 browser/platform combinations without any noticeable glitches being detected
  • The template was tested successfully with 6 browser/platform combinations with only small glitches being detected
  • The template did not display the required CLF layout and design with 25 browser/platform combinations, but the page content was still legible and accessible
  • The template was successfully tested with the following platforms:
    • Windows (Win32)
    • Mac OS X (10.x+)
    • Mac PPC (8.x - 9.x)
  • The template was successfully tested with the following browser brands:
    • Amaya
    • AOL Explorer
    • Avant
    • Beonex
    • Camino
    • Chimera
    • Crazy Browser
    • DocZilla
    • Firebird
    • Firefox
    • Internet Explorer
    • K-Meleon
    • ManyOne
    • Mozilla
    • MyIE2
    • Netscape
    • OmniWeb
    • Opera
    • Safari
    • SeaMonkey
    • SlimBrowser

12.2 Windows browser support

The template was tested extensively with browsers installed on Windows 2000 Service Pack 4 and Windows XP Pro Service Pack 2.

12.2.1 Browsers tested with no noticeable display glitches

The template was tested successfully with the following Windows browser versions (55 in total) without any noticeable glitches being detected:

  • AOL Explorer 1.5
  • Avant Browser 9.02
  • Beonex 0.6.4, 0.8.1
  • Crazy Browser 1.05
  • DocZilla 1.0
  • Firebird 0.6.1, 0.7.1
  • Firefox 0.8, 0.9.1, 1.0, 1.0.8, 1.5.0.4, 2.0
  • Internet Explorer 5.0, 5.5, 6.02, 7.0
  • K-Meleon 0.7, 0.8.2, 0.9.13
  • ManyOne Beta
  • Mozilla 0.8, 0.9.2, 0.9.4, 1.0.1, 1.1, 1.2.1, 1.4, 1.5, 1.6, 1.7.3, 1.7.13
  • MyIE2 0.9.27.68
  • Netscape 6.2.3, 7.0, 7.1, 7.2, 8.1, 9.0
  • Opera 4.02, 5.12, 6.04, 7.02, 7.1, 7.23, 7.51, 7.54, 8.54, 9.0, 9.2
  • Safari 3.0
  • SeaMonkey 1.1.2, 1.1.4
  • SlimBrowser V3.99

12.2.2 Browsers tested with small display glitches

The template was tested successfully with the following Windows browser versions (2 in total) with only small glitches being detected:

  • Amaya 9.1
  • Mozilla M16

12.2.3 Browsers tested with major display glitches but still legible

The template did not display with the required CLF layout and design when tested on the following Windows browser versions (9 in total), but the page content was still legible and accessible:

  • Amaya 7.2a, 8.2
  • Netscape 3.04, 4.08, 4.51, 4.61, 4.72
  • WebTV Viewer 2.6
  • xSmiles 0.91

12.3 Mac OS X browser support

The template was tested extensively with browsers installed on Macintosh OS X 10.2.5.

12.3.1 Browsers tested with no noticeable display glitches

The template was tested successfully with the following Mac OS X browser versions (43 in total) without any noticeable glitches being detected:

  • Beonex 0.8.1
  • Camino 0.7, 0.8, 1.0.2, 1.5
  • Chimera 0.6
  • Firebird 0.6.1, 0.7.1
  • Firefox 0.8, 0.9.1, 1.0.8, 1.5.0.4, 2.0
  • Internet Explorer 5.5
  • Mozilla 0.9.2, 1.0.2, 1.1, 1.2.1, 1.3, 1.4, 1.5.1, 1.6, 1.7, 1.7.13
  • Netscape 6.2.3, 7.02, 7.10, 8.1, 9.0
  • OmniWeb 4.5, 5.0b8, 5.1.3, 5.5.4
  • Opera 5.0, 6.0, 7.5.1, 8.54, 9.0, 9.2
  • Safari 1.0 (v85), 3.0
  • SeaMonkey 1.1.2, 1.1.4

12.3.2 Browsers tested with small display glitches

The template was tested successfully with the following Mac OS X browser versions (2 in total) with only small glitches being detected:

  • Internet Explorer 5.1.3, 5.2.2

12.3.3 Browsers tested with major display glitches but still legible

The template did not display with the required CLF layout and design when tested on the following Mac OS X browser versions (3 in total), but the page content was still legible and accessible:

  • Netscape 4.77, 4.8
  • xSmiles 0.9.1

12.4 Mac PPC browser support

The template was tested extensively with browsers installed on Macintosh OS 9.1.

12.4.1 Browsers tested with no noticeable display glitches

The template was tested successfully with the following Mac PPC browser versions (10 in total) without any noticeable glitches being detected:

  • Internet Explorer 5.5
  • Mozilla 0.8, 0.9.2, 1.0.2, 1.1, 1.2.1
  • Netscape 6.2.3, 7.02
  • Opera 5.0, 6.0

12.4.2 Browsers tested with small display glitches

The template was tested successfully with the following Mac PPC browser versions (2 in total) with only small glitches being detected:

  • Internet Explorer 5.0, 5.1.6

12.4.3 Browsers tested with major display glitches but still legible

The template did not display with the required CLF layout and design when tested on the following Mac PPC browser versions (10 in total), but the page content was still legible and accessible:

  • Internet Explorer 2.1, 3.01
  • Netscape 3.04, 4.04, 4.08, 4.51, 4.61, 4.7, 4.75, 4.8

Top of Page

13.0 Known Issues

13.1 Width limitations for content area objects in Internet Explorer

Properties such as borders, margins and padding tend to affect the width of objects in Internet Explorer differently than most other browsers. Internet Explorer will include more of these properties in the width calculation than the other browsers, resulting in a larger effective object width. As a result, an object that has the width specified as 300 pixels may have an effective width of 305 pixels in Internet Explorer. The same applies to a width of 100%, where the effective width may be 102% in Internet Explorer.

Combine this width issue with Internet Explorer handling the overflowing of content differently than other browsers, and this results in a minor display issue with the template. If the width of the content area is exceeded by the effective width of an object in either the two-column or three-column templates, the object and all content following it will be pushed down to the vertical end of the side menu.

This is not a serious problem, just a display issue on Internet Explorer. There is no known fix for this problem other than using the one-column template or avoiding the situation where the effective width of an object exceeds the width of the content area.

This issue does not occur with tables that have a specified width of 100%, as long as the padding and margin values for the table are not changed and the physical width of the contained text can fit within the content area.

Note: The one-column template should be used only if the content is too wide to fit in the two-column template and not because the width of an object was set at too high a value. The content being too large for the content area should occur only with wide tables and images.

To avoid the situation where the effective width of an object exceeds the width of the content area, respect the following two-column and three-column template content area limitations when specifying the widths of objects:

Width limitations for content area objects in Internet Explorer
Template Maximum object percentage width (%) Maximum object pixel width (px)
Two-column (2col*.html) 98.5% (same as widthFull CSS class) 593 pixels
Three-column (3col*.html) 98.5% (same as widthFull CSS class) 388 pixels

Note: The above width limitations are for an object with no padding or margin values specified and a border that is no more than 1 pixel in width. Any further increase in the padding, margin or border values may reduce the width limitation even further.

It is recommended that only relative (percentage) width values be used for objects to ensure compatibility with the content area becoming expandable in the future.

13.2 Alignment of footer elements in Internet Explorer 5.x for Mac

Unlike all other browsers, the Date Modified, Top of Page and Important Notices footer elements are not aligned properly in Internet Explorer 5.x for Mac. The three footer elements are too wide to fit on the same line, resulting in the three elements being stacked vertically.

13.3 Top of Page links in Internet Explorer 5.x for Mac

Unlike all other browsers, the Top of Page content area link is too wide in Internet Explorer 5.x for Mac to float to the right of any text. The end result is that the link will fill an entire line, pushing all the text that follows it to the next line. The normal behaviour for the Top of Page content area link is to float to the right of any text that follows it.

13.4 Top of Page links in Opera 4.x, 5.x and 6.x (three-column template only)

Unlike other browsers, when the Top of Page content area link is used with the three-column template in Opera 4.x, 5.x and 6.x, the link will display with a reduced right margin and padding until the vertical end of the right side menu. This results in the link being positioned immediately to the left of the right side menu, overlapping the content area border. The normal margin and padding for the link will resume once beyond the vertical end of the right side menu.

13.5 Common menu bar display glitches in Amaya 9.1 and Mozilla M16 for Windows

Unlike other browsers, the common menu bar is not displayed according to specification in Amaya 9.1 and Mozilla M16 for Windows. The common menu bar in Amaya 9.1 is several pixels too high, and there are numerous display glitches in the common bar on Mozilla M16 for Windows.
 

13.6 Excessive padding below the Welcome Page language links on Opera 8.54

The padding below the Welcome Page language links in Opera 8.54 is approximately 20 pixels greater than allowed by the CLF standards. This is the result of a height calculation issue related to floated elements in Opera 8.54.

13.7 Alignment of Welcome Page language link text in Internet Explorer 5.x for Mac

The Welcome Page language link text is not properly aligned in Internet Explorer 5.x for Mac. The text should be centre aligned but it is instead left aligned. This is the result of an alignment calculation issue related to floated objects in Internet Explorer 5.x for Mac.

13.8 Scaling issues for elements using em units in Netscape 6.x

Unlike other browsers, non-text elements whose dimensions are specified using em units do not scale with the text in Netscape 6.x. This prevents the scaling of non-text template elements such as the stylized leaf, the common menu bar, the breadcrumb area, the top of page arrow, the banner, and the side menu. This can lead to text exceeding the dimensions of containers and overlapping other elements at larger text sizes.

13.9 Font size issues with nested lists in Opera 6.x for Windows

Unlike other browsers, the inheritance of font sizes for nested lists is handled incorrectly in Opera 6.x for Windows. This inheritance issue causes a significant reduction in text size for each nested list level with the text eventually becoming unreadable.

13.10 Skip navigation links may interfere with the display of other header elements in Internet Explorer

Unlike other browsers, the skip navigation links may interfere with the display of other header elements in Internet Explorer when JavaScript is disabled because of a z-index support issue. This can be prevented by changing the width and the starting position of the skip navigation links container to ensure the container does not overlap the other header elements. Instructions can be found in section 6.3.2.17 (Changing the width and the starting position of the skip navigation links container).

14.0 Template version history

Version 1.04 - 2007-11-14

Summary of changes

  • Integrated version 1.1 of the Service Canada multimedia player
  • Integrated JavaScript in the Progressive Enhancement component for the display of title values for links with keyboard focus
  • Integrated JavaScript in the Progressive Enhancement component for displaying an initiative link slideshow
  • Corrected the alignment of the skip navigation links in Internet Explorer 7.x
  • Corrected the issue of skip navigation links persistently overlapping and obscuring other header elements in Internet Explorer 5.5, 6.x and 7.x (JavaScript must be enabled and supported).
  • Corrected printer-friendly support for multilingual and server message pages
  • Corrected a printer-friendly support issue in Internet Explorer 5.x and 6.x where the footer was randomly being included on more than one printed page
  • Corrected a printer-friendly support issue with the "Canada" wordmark when attempting to print out the server message page in landscape
  • Improved side menu support to allow div and p elements to look like h2 elements
  • Increased the font size of the headline class
  • Added a left margin to the image-right class that is equivalent in size to the right margin of the image-left class
  • Added the wrap utility class to allow floating of content to the right of the content area h1 in Internet Explorer

Updated files

  • base.css
  • base2.css
  • base-institution.css
  • pf-if.css
  • ctoam\css\base-institution.css
  • *.html
  • scripts\pe-ap.js
  • scripts\ca.gc.mp-jm.js (new)
  • scripts\ca.gc.sshw-mdiap.js (new)
  • swf\mp-jm.swf (new)
  • images\wmms.png (new)
  • images\sshw-mdiap\deco.gif (new)
  • images\sshw-mdiap\next-suiv.gif (new)
  • images\sshw-mdiap\pause.gif (new)
  • images\sshw-mdiap\play-jouer.gif (new)
  • images\sshw-mdiap\prev-prec.gif (new)

How to update Web pages based on version 1.03 of the template

  1. Replace base.css with the updated version of the file
  2. Replace base2.css with the updated version of the file
  3. Migrate previous base-institution.css changes to the updated version of the file
  4. Replace base-institution.css with the updated version of the file
  5. Replace pf-if.css with the updated version of the file
  6. Add ca.gc.mp-jm.js to your scripts directory
  7. Add ca.gc.sshw-mdiap.js to your scripts directory
  8. Add mp-jm.swf to your swf directory
  9. Add wmms.png to your images directory
  10. Add sshw-mdiap\deco.gif to your images directory
  11. Add sshw-mdiap\next-suiv.gif to your images directory
  12. Add sshw-mdiap\pause.gif to your images directory
  13. Add sshw-mdiap\play-jouer.gif to your images directory
  14. Add sshw-mdiap\prev-prec.gif to your images directory
  15. Perform the following global search and replace operations (excluding quotes) for all HTML files using the template:
    • Replace "VERSION 1.03" with "VERSION 1.04"

Changes in detail

  • Changed the class "h2.nav" to "h2.nav, div.left div.h2nav, div.left p.h2nav" in base.css and base2.css
  • Changed the class "div.wrapContainer" to "div.center div.wrapContainer" in base.css
  • Changed the class ".fontSize100, .topPage, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline" to ".fontSize100, .topPage" in base.css and base2.css
  • Changed the class "h6, .h6Size, .fontSize110" to "h6, .h6Size, .fontSize110, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline" in base.css and base2.css
  • Changed the class "div.right li ul.nav" to "div.right li ul.nav, div.right li p.nav, div.right li div.nav" in base-institution.css and ctoam\css\base-institution.css
  • Changed the class "h2.nav, h2.nav a:link, h2.nav a:visited" to "div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited" in base-institution.css and ctoam\css\base-institution.css
  • Changed the class "h2.nav a:hover" to "div.left h2.nav a:hover, div.left h2.nav a:active, div.left h2.nav a:focus, div.left div.h2nav a:hover, div.left div.h2nav a:active, div.left div.h2nav a:focus, div.left p.h2nav a:hover, div.left p.h2nav a:active, div.left p.h2nav a:focus, div.right h2.nav a:hover, div.right h2.nav a:active, div.right h2.nav a:focus, div.right div.h2nav a:hover, div.right div.h2nav a:active, div.right div.h2nav a:focus, div.right p.h2nav a:hover, div.right p.h2nav a:active, div.right p.h2nav a:focus" in base-institution.css and ctoam\css\base-institution.css
  • Changed the class "div.fip" to "div.fip, div.cwm" in pf-if.css
  • Changed the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.fpml, div.left, div.right, div.footer div.foot1 a, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" in pf-if.css
  • Changed the property "width: 100%;;" to "width: 100%;" in class "* html div.center h1" of base.css
  • Changed "VERSION 1.03" to "VERSION 1.04" in *.*
  • Removed the class "* html div.page div.core div.navaid a" from base.css
  • Removed the class "*:first-child+html div.page div.core div.navaid a" from base.css
  • Added the class "* html div.center h1.wrap" with the property "width: auto;" to base.css
  • Added the class "div.tooltip" with properties "border: 1px solid InfoText;", "background: InfoBackground;", "color: InfoText;", "font: message-box;", "padding: 2px 4px;", "text-align: left;", "position: absolute;", "width: auto;", and "height: auto;" to base.css
  • Added the class "div.safetooltip" with the properties "z-index: 21000;", "border: 1px solid #000;", "background-color: #fffeee;", "color: #000;", "font: 0.85em Verdana, Geneva, Arial, Helvetica, sans-serif;", "padding: 2px 4px;", "text-align: left;", "position: absolute;", "width: auto;", and "height: auto;" to base.css
  • Added the property "margin-left: 10px; to the class ".image-right" in base.css
  • Added the property "float: none;" to the class "div.center, * html div.center" in pf-if.css

Version 1.03 - 2007-06-12

Summary of changes

  • Improved the skip navigation links by enabling them to become visible when a mouse pointer hovers over top or when selected using a keyboard or other alternate input device
  • Improved the appearance of the stylized leaf in the banner
  • Added support for boxes in the right side menu that do not contain lists
  • Added support for content area headlines
  • Corrected an issue with the printer-friendly functionality in Internet Explorer 6.x where an extra white page was being printed unnecessarily
  • Corrected a display issue in Netscape 7.x where the common menu bar links disappeared when the text size was increased enough to cause the common menu bar to wrap
  • Corrected a display issue in Netscape 6.x where the vertical white lines separating the common menu bar links were not the same height as the links
  • Corrected a display issue with the Proactive Disclosure link in the coat of arms example
  • Corrected a typo in the dcterms.modified metadata field.
  • Improved support for text wrapping around images and tables
  • Added a vertical bar between skip navigation links that was missing in the two column content page templates

Updated files

  • base.css
  • base2.css
  • base-institution.css
  • pf-if.css
  • ctoam\css\base-institution.css
  • *.html
  • lffl.gif
  • lffl.png (new)
  • inv.gif (new)
  • scripts\pe-ap.js (new)

How to update Web pages based on version 1.02 of the template

  1. Replace lffl.gif with the updated version of the file
  2. Replace base.css with the updated version of the file
  3. Replace base2.css with the updated version of the file
  4. Migrate previous base-institution.css changes to the updated version of the file
  5. Replace base-institution.css with the updated version of the file
  6. Replace pf-if.css with the updated version of the file
  7. Add lffl.png to the same directory as lffl.gif
  8. Add inv.gif to the same directory as lffl.gif
  9. Add pe-ap.js to your scripts directory
  10. Add the following code to all English content pages after "<!-- TEMPLATE SCRIPTS/CSS END | FIN DES SCRIPTS/CSS DU GABARIT -->":
          <!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->
          <script src="scripts/pe-ap.js" type="text/javascript"></script>
          <script type="text/javascript">
          /* <![CDATA[ */
                var params = {
                      lng:"eng",
                      pngfix:"images/inv.gif"
                };
                PE.progress(params);
          /* ]]> */
          </script>
          <!-- PROGRESSIVE ENHANCEMENT ENDS | FIN DE L'AMELIORATION PROGRESSIVE -->
  11. Add the following code to all French content pages after "<!-- FIN DES SCRIPTS/CSS DU GABARIT | TEMPLATE SCRIPTS/CSS END -->":
          <!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->
          <script src="scripts/pe-ap.js" type="text/javascript"></script>
          <script type="text/javascript">
          /* <![CDATA[ */
                var params = {
                      lng:"fra",
                      pngfix:"images/inv.gif"
                };
                PE.progress(params);
          /* ]]> */
          </script>
          <!-- FIN DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT ENDS -->
  12. Perform the following global search and replace operations (excluding quotes) for all HTML files using the two column template:
    1. Replace "<a href="#cont">Skip to content</a>" with "<a href="#cont">Skip to content</a> |"
    2. Replace "<a href="#cont">Passer au contenu</a>" with "<a href="#cont">Passer au contenu</a> |"
  13. Perform the following global search and replace operations (excluding quotes) for all HTML files using the template:
    1. Replace "dcterms.modifed" with "dcterms.modified"
    2. Replace "class="lf"" with "class="lf pngfix""
    3. Replace "VERSION 1.02" with "VERSION 1.03"

Changes in detail

  • Changed the class ".fontSize100, .topPage" to ".fontSize100, .topPage, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline" in base.css and base2.css
  • Changed the class "div.wrapContainer" to "div.center div.wrapContainer" in base.css
  • Changed the class "div.right li ul.nav" to "div.right li ul.nav, div.right li div.nav, div.right li p.nav" in base-institution.css and ctoam\css\base-institution.css
  • Changed the class "div.left li.menucontent" to "div.left li.menucontent, div.left div.menucontent" in ctoam\css\base-institution.css
  • Changed the class "div.left li.menucontent, div.left a.menulink" to "div.left li.menucontent, div.left div.menucontent, div.left a.menulink" in ctoam\css\base-institution.css
  • Changed the class "div.right li.menucontent" to "div.right li.menucontent, div.right div.menucontent" in ctoam\css\base-institution.css
  • Changed the property "position: relative;" to "position: static;" in the class "* html div.banner, * html div.banner-eng, * html div.banner-fra, * html div.banner-lfcoa-eng, * html div.banner-lfcoa-fra" of base.css
  • Changed "dcterms.modifed" to "dcterms.modified" in *.html
  • Changed "VERSION 1.02" to "VERSION 1.03" in *.*
  • Removed the property "overflow: hidden;" from the class "div.fp, div.fpml" in base.css
  • Removed the property "overflow: visible;" from the class "* html div.fp, * html div.fpml" from base.css
  • Removed the property "float: left;" from the class "li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a" in base.css
  • Removed the property "float: left;" from the class "li.fiptext div, li.fiptexta div, li.fiptextb div, li.fiptextc div" in base.css
  • Added the class "a:active, a:focus" with the property "cursor: auto;" to base.css
  • Added the class "div.fip, div.cwm" with the properties "position: relative;", and "z-index: 1;" to base.css
  • Added the class "* html div.fip, * html div.cwm" with the property "position: static;" to base.css
  • Added the class "*:first-child+html div.fip, *:first-child+html div.cwm" with the property "position: static;" to base.css
  • Added the class "*:first-child+html div.banner, *:first-child+html div.banner-eng, *:first-child+html div.banner-fra, *:first-child+html div.banner-lfcoa-eng, *:first-child+html div.banner-lfcoa-fra" with the property "position: static;" to base.css
  • Added the class "div.page div.core div.navaid" with the properties "font-size: 100%;", "float: none;", "overflow: visible;", "max-width: 50%;", "height: auto;", "top: 0px;", "margin-left: 210px;", "margin-right: 200px;", and "color: #FFF;" to base.css
  • Added the class "* html div.page div.core div.navaid" with the property "font-size: 90%;" to base.css
  • Added the class "*:first-child+html div.page div.core div.navaid" with the property "font-size: 90%;" to base.css
  • Added the class "div.page div.core div.navaid a" with the properties "color: #FFF;", "border-color: #FFF;", "padding: 5px;", "font-size: 100%;", "line-height: 140%;", "vertical-align: middle;", "border-width: 1px 1px 1px 1px;", "border-style: none;", "white-space: nowrap;", "position: relative;", and "z-index: 0;" to base.css
  • Added the class "* html div.page div.core div.navaid a" with the property "line-height: 180%;" to base.css
  • Added the class "*:first-child+html div.page div.core div.navaid a" with properties "float: left;", and "margin-left: 5px;" to base.css
  • Added the class "div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus" with properties "border-style: solid;", "text-decoration: underline;", and "z-index: 2;" to base.css
  • Added the class "*:first-child+html div.fp, *:first-child+html div.fpml" with the property "float: none;" to base.css
  • Added the class "div.right li div.nav, div.right li p.nav" with properties "margin-bottom: 10px;", and "padding: 2px 5px 2px 12px;" to base.css
  • Added the class "div.right li p.nav" with the property "margin-top: 0px;" to base.css
  • Added the class "h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline, h1.compress, h2.compress, h3.compress, h4.compress, h5.compress, h6.compress, p.compress, ul.compress, ol.compress" with properties "margin-top: 0px;" and "margin-bottom: 0px;" to base.css
  • Added the class "h1.headline a:link, h1.headline a:visited, h2.headline a:link, h2.headline a:visited, h3.headline a:link, h3.headline a:visited, h4.headline a:link, h4.headline a:visited, h5.headline a:link, h5.headline a:visited, h6.headline a:link, h6.headline a:visited" with the property "text-decoration: none;" to base.css
  • Added the class "h1.headline a:hover, h2.headline a:hover, h3.headline a:hover, h4.headline a:hover, h5.headline a:hover, h6.headline a:hover" with the property "text-decoration: underline;" to base.css
  • Added the class "div.left div.wrapContainer, div.right div.wrapContainer" with properties "float: left;" and "width: 100%;" to base.css
  • Added the class "div.page div.core div.navaid" with properties "width: 450px;", and "padding-left: 50px;" to base-institution.css
  • Added the class "* html div.page div.core div.navaid" with properties "width: 450px;", and "padding-left: 50px;" to base-institution.css
  • Added the class "*:first-child+html div.page div.core div.navaid" with properties "width: 450px;", and "padding-left: 50px;" to base-institution.css
  • Added the class "div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus" with properties "color: #000;", "background-color: #CC9;", and "border-color: #000;" to base-institution.css
  • Added the class "div.colLayout" with properties "background-color: #FFF;" and "height: auto;" to pf-if.css
  • Added the properties "position: relative;", and "z-index: 1;" to the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" in base.css
  • Added the property "float: left;" to the class "div.fp, div.fpml" in base.css
  • Added the property "float: none;" to the class "* html div.fp, * html div.fpml" in base.css
  • Added the property "background-color: #FFF;" to the class "body" in pf-if.css
  • Added the property "height: 100%;" to the class "div.colLayout" in ctoam\css\base-institution.css
  • Added the following code to all English content pages after "<!-- TEMPLATE SCRIPTS/CSS END | FIN DES SCRIPTS/CSS DU GABARIT -->":
          <!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->
          <script src="scripts/pe-ap.js" type="text/javascript"></script>
          <script type="text/javascript">
          /* <![CDATA[ */
                var params = {
                      lng:"eng",
                      pngfix:"images/inv.gif"
                };
                PE.progress(params);
          /* ]]> */
          </script>
          <!-- PROGRESSIVE ENHANCEMENT ENDS | FIN DE L'AMELIORATION PROGRESSIVE -->
  • Added the following code to all French content pages after "<!-- FIN DES SCRIPTS/CSS DU GABARIT | TEMPLATE SCRIPTS/CSS END -->":
          <!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->
          <script src="scripts/pe-ap.js" type="text/javascript"></script>
          <script type="text/javascript">
          /* <![CDATA[ */
                var params = {
                      lng:"fra",
                      pngfix:"images/inv.gif"
                };
                PE.progress(params);
          /* ]]> */
          </script>
          <!-- FIN DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT ENDS -->

Version 1.02 - 2007-03-01

Summary of changes

  • Corrected several display issues in Internet Explorer 7 that were related to increasing the text size or increasing the zoom
  • Corrected a display issue in Firefox where the common menu bar links were being clipped at large font sizes
  • Corrected a display issue in Firefox where the banner text overlapped the common menu bar links at very large font sizes
  • Corrected a display issue in Firefox where the breadcrumb overlapped the side menu and the content area at very large font sizes
  • Corrected a display issue in Firefox where the footer elements overlapped one another at very large font sizes
  • Corrected a display issue in Firefox where the side menu text overlapped the content area text at very large font sizes
  • Corrected a display issue in Firefox where the Proactive Disclosure and footer colour strips were disproportionately small compared to the rest of the page at very large font sizes
  • Corrected a display issue in Firefox where the width of the page was disproportionately small compared to the rest of the page at very large font sizes
  • Corrected a minor printing issue in Internet Explorer that occasionally resulted in one or more words being excluded from the printout
  • Corrected the Welcome Page templates to prevent the repeating of the background images in the message area
  • Corrected a display issue in Firefox where the Welcome Page message area text overlapped other text on the page at very large font sizes
  • Corrected a display issue in Firefox when the message area text exceeds the message dimensions at very large font sizes
  • Corrected a display issue in Internet Explorer where a colour specified for the free space below the side menu and content areas did not cover the entire free space area
  • Changed the font for form controls from Courier New to Verdana
  • Added support for marketing campaign and government initiative-style banners and Welcome Pages
  • Added support for eNewsletters
  • Added the .wrapContainer utility class to make it easier to wrap text around tables and images
  • Updated the client-side CSS solutions to support the latest template changes

Updated files

  • base.css
  • base2.css
  • base-institution.css
  • 3col.css
  • 2col.css
  • pf-if.css (formerly pf.css)
  • wp-pa.css (formerly wp.css)
  • wp-pa2.css (formerly wp2.css)
  • wp-pa-institution.css (formerly wp-institution.css)
  • wp-pa.gif (formerly wp.gif)
  • wp-pa-alt.gif (formerly wp-alt.gif)
  • lffl.gif (formerly lf.gif)
  • wmms.gif (formerly wm.gif)
  • wp-pa*.html (formerly wp*.html)
  • 3col*.html
  • 2col*.html
  • 1col*.html
  • srvmsg*.html

How to update Web pages based on version 1.01 of the template

  1. Rename wp.gif to wp-pa.gif
  2. Rename wp-alt.gif to wp-pa-alt.gif
  3. Rename lf.gif to lffl.gif
  4. Rename wm.gif to wmms.gif
  5. Replace base.css with the updated version of the file
  6. Replace base2.css with the updated version of the file
  7. Migrate previous base-institution.css changes to the updated version of the file
  8. Replace base-institution.css with the updated version of the file
  9. Replace pf.css with pf-if.css
  10. Replace wp.css with wp-pa.css
  11. Replace wp2.css with wp-pa2.css
  12. Migrate previous wp-institution.css changes to wp-pa-institution.css
  13. Replace wp-institution.css with wp-pa-institution.css
  14. Perform the following global search and replace operations (excluding quotes) for all HTML files using the template:
    1. Replace "wp.css" with "wp-pa.css"
    2. Replace "wp2.css" with "wp-pa2.css"
    3. Replace "wp-institution.css" with "wp-pa-institution.css"
    4. Replace "pf.css" with "pf-if.css"
    5. Replace "wp.gif" with "wp-pa.gif"
    6. Replace "wp-alt.gif" with "wp-pa-alt.gif"
    7. Replace "wm.gif" with "wmms.gif"
    8. Replace "lf.gif" with "lffl.gif"
    9. Replace "id="siteuri"" with "class="siteuri""
    10. Replace "id="center"" with "class="center""
    11. Replace "id="left"" with "class="left""
    12. Replace "id="right"" with "class="right""
    13. Replace "VERSION 1.0 " with "VERSION 1.02 "
  15. Perform the following global search and replace operations (excluding quotes) for all custom CSS used with the template (normally found in institution.css):
    1. Replace "#siteuri" with ".siteuri"
    2. Replace "#center" with ".center"
    3. Replace "#left" with ".left"
    4. Replace "#right" with ".right"

Top of Page

Changes in detail

  • Renamed wp.css to wp-pa.css
  • Renamed wp2.css to wp-pa2.css
  • Renamed wp-institution.css to wp-pa-institution.css
  • Renamed wp.gif to wp-pa.gif
  • Renamed wp-alt.gif to wp-pa-alt.gif
  • Renamed wm.gif to wmms.gif
  • Renamed lf.gif to lffl.gif
  • Renamed wp*.html to wp-pa*.html
  • Changed "css/wp.css" to "css/wp-pa.css" in wp-pa*.html
  • Changed "css/wp2.css" to "css/wp-pa2.css" in wp-pa*.html
  • Changed "css/wp-institution.css" to "css/wp-pa-institution.css" in wp-pa*.html
  • Changed "pf.css" to "pf-if.css" in 3col*.html , 2col*.html, and 1col*.html
  • Changed "id="siteuri"" to "class="siteuri"" in 3col*.html , 2col*.html , and 1col*.html
  • Changed "id="center"" to "class="center"" in 3col*.html , 2col*.html , 1col*.html , and srvmsg*.html
  • Changed "id="left"" to "class="left"" in 3col*.html , 2col*.html , 1col*.html , and srvmsg*.html
  • Changed "id="right"" to "class="right"" in 3col*.html , 2col*.html , 1col*.html , and srvmsg*.html
  • Changed "wm.gif" to "wmms.gif" in *.html
  • Changed "lf.gif" to "lffl.gif" in *.html
  • Changed "VERSION 1.0" to "VERSION 1.02" in *.*
  • Changed the class ".navaid" to "div.navaid, p.navaid, h1.navaid, h2.navaid" in base.css
  • Changed the class ".navaid a" to "div.navaid a, p.navaid a, h1.navaid a, h2.navaid a" in base.css
  • Changed the class ".fp, .fpml" to "div.fp, div.fpml" in base.css
  • Changed the class ".fpml" to "div.fpml" in base.css
  • Changed the class ".commonbar" to "ul.commonbar" in base.css
  • Changed the class ".fiptext, .fiptexta, .fiptextb, .fiptextc" to "li.fiptext, li.fiptexta, li.fiptextb, li.fiptextc" in base.css and base2.css
  • Changed the class ".fiptext" to "li.fiptext" in base.css
  • Changed the class ".fiptexta" to "li.fiptexta" in base.css
  • Changed the class ".fiptextb" to "li.fiptextb" in base.css
  • Changed the class ".fiptextc" to "li.fiptextc" in base.css
  • Changed the class ".fiptext div, .fiptextb div, .fiptextc div" to "li.fiptext div, li.fiptextb div, li.fiptextc div" in base.css
  • Changed the class ".fiptext a, .fiptexta a, .fiptextb a, .fiptextc a" to "li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a" in base.css
  • Changed the class "#left, #right" to "div.left, div.right" in base.css
  • Changed the class ".menucontent, .menucontent li" to "li.menucontent, li.menucontent li, div.menucontent, div.menucontent li" in base.css
  • Changed the class ".menucontent" to "li.menucontent, div.menucontent" in base.css and base2.css
  • Changed the class ".menulink" to "a.menulink" in base.css
  • Changed the class ".menulink:hover" to "a.menulink:hover" in base.css
  • Changed the class ".prodis" to "div.prodis" in base.css and base-institution.css
  • Changed the class "#center" to "div.center" in base.css, 3col.css, and 2col.css
  • Changed the class "#center h1, h2, h3, h4, h5, h6" to "div.center h1, h2, h3, h4, h5, h6" in base.css
  • Changed the class "* html #center h1" to "* html div.center h1" in base.css
  • Changed the class ".blackborder" to "div.blackborder" in base.css, base-institution.css, and pf.css
  • Changed the class ".footer" to "div.footer" in base.css and base2.css
  • Changed the class ".footer div.footerline" to "div.footer div.footerline" in base.css
  • Changed the class ".foot1, .foot2, .foot3" to "div.foot1, div.foot2, div.foot3" in base.css
  • Changed the class ".foot1" to "div.foot1" in base.css
  • Changed the class ".foot2" to "div.foot2" in base.css
  • Changed the class ".foot3" to "div.foot3" in base.css
  • Changed the class ".uparrow" to "img.uparrow" in base.css
  • Changed the class ".date" to "span.date" in base.css
  • Changed the class ".gcinits" to "div.gcinits" in base.css
  • Changed the class ".gcinit div" to "div.gcinit div" in base.css
  • Changed the class "#center .gcinit div" to "div.center div.gcinit div" in base.css
  • Changed the class ".gcinit a, .gcinit a:visited" to "div.gcinit a, div.gcinit a:visited" in base.css
  • Changed the class "body, p, blockquote, table, td, th, li, a, ul, ol, dd, dl, dt, form, button, fieldset, label" to "body, p, blockquote, table, td, th, li, a, ul, ol, dd, dl, dt, form, button, fieldset, label, select, option, input, textarea" in base.css
  • Changed the class "select, option, input, textarea, code, code span" to "code, code span" in base.css
  • Changed the class "div.banner" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" in base.css
  • Changed the class "p.main" to "div.banner p.main" in base.css , and base2.css
  • Changed the class "p#siteuri" to "div.banner p.siteuri" in base.css , and base2.css
  • Changed the class ".foot2 img, div.topPage img, p.topPage img" to "div.foot2 img, div.topPage img, p.topPage img" in base.css
  • Changed the class ".menucontent li" to "li.menucontent li, div.menucontent li" in base2.css
  • Changed the class "#left" to "div.left" in 3col.css and 2col.css
  • Changed the class "#right" to "div.right" in 3col.css
  • Changed the class "* html #center" to "* html div.center" in 3col.css and 2col.css
  • Changed the class ".colLayout" to "div.colLayout" in base-institution.css
  • Changed the class "#right li ul.nav" to "div.right li ul.nav" in base-institution.css
  • Changed the class "#left .menucontent" to "div.left li.menucontent, div.left div.menucontent" in base-institution.css
  • Changed the class "#left .menucontent, #left .menulink" to "div.left li.menucontent, div.left div.menucontent, div.left a.menulink" in base-institution.css
  • Changed the class "#right .menucontent" to "div.right li.menucontent, div.right div.menucontent" in base-institution.css
  • Changed the class "#right .menulink" to "div.right a.menulink" in base-institution.css
  • Changed the class ".blackborder:after" to "div.blackborder:after" in base-institution.css
  • Changed the class ".footer div.footerline" to "div.footer div.footerline" in base-institution.css
  • Changed the class ".footer a:link, .footer a:visited, div.center .footer a:link, #center .footer a:visited, #center .topPage a:link, div.center .topPage a:visited" to "div.footer a:link, div.footer a:visited, div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center div.topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited" in base-institution.css
  • Changed the class "div.banner, .fp, #left, #right, .footer div.foot2 a, .footer div.foot3 a, .footer div.footerline, .navaid, .topPage" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" in pf.css
  • Changed the class "#center, * html #center" to "div.center, * html div.center" in pf-if.css
  • Changed the class ".headcontainer" to "div.headcontainer" in wp-pa.css , wp-pa2.css and wp-pa-institution.css
  • Changed the class ".mcontainter" to "div.mcontainter" in wp-pa.css
  • Changed the class ".fip" to "div.fip" in wp-pa.css
  • Changed the class ".wm" to "div.wm" in wp-pa.css
  • Changed the class ".msgarea, .msgareaalt" to "div.msgarea, div.msgareaalt, div.headcontainer" in wp-pa.css
  • Changed the class ".msgarea" to "div.msgarea" in wp-pa.css and wp-pa-institution.css
  • Changed the class ".msgareaalt" to "div.msgareaalt" in wp-pa.css and wp-pa-institution.css
  • Changed the class ".msgarea h1, .msgareaalt h1" to "div.msgarea h1, div.msgareaalt h1" in wp-pa.css and wp-pa-institution.css
  • Changed the class ".headtitleLft" to "div.headtitleLft" in wp-pa.css
  • Changed the class ".headtitleRgt" to "div.headtitleRgt" in wp-pa.css
  • Changed the class ".buttons" to "div.buttons" in wp-pa.css
  • Changed the class ".mlbuttons" to "div.mlbuttons" in wp-pa.css
  • Changed the class ".langbtn, .mllangbtn" to "div.langbtn, div.mllangbtn" in wp-pa.css
  • Changed the class ".mllangbtn" to "div.mllangbtn" in wp-pa.css
  • Changed the class ".lb, mlb" to "div.lb, div.mlb" in wp-pa.css
  • Changed the class ".lb a, mlb a" to "div.lb a, div.mlb a" in wp-pa.css
  • Changed the class ".lb a" to "div.lb a" in wp-pa.css
  • Changed the class ".mlb a" to "div.mlb a" in wp-pa.css
  • Changed the class ".imptext" to "div.imptext" in wp-pa.css
  • Changed the class ".imptext a, .imptext a:visited" to "div.imptext a, .imptext a:visited" in wp-pa.css
  • Changed the class "#inlft, #inrgt" to "div#inlft, div#inrgt" in wp-pa.css
  • Changed the class "#inlft a, #inlft a:visited, #inrgt a, #inrgt a:visited, .impnot" to "div#inlft a, div#inlft a:visited, div#inrgt a, div#inrgt a:visited, p.impnot" in wp-pa.css and wp-pa2.css
  • Changed the class ".msgarea h1" to "div.msgarea h1" in wp-pa-institution.css
  • Changed the property "height: 6.25em;" to "min-height: 5.58em;" in the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" of base.css
  • Changed the property "height: 1.56em;" to "min-height: 1.23em;" in the class "p.breadcrumb" of base.css
  • Changed the property "padding: 1px 0px 0px 3px;" to "padding: 1px 0px 5px 3px;" in the class "p.breadcrumb" of base.css
  • Changed the property "padding-right: 0px;" to "padding-right: 10px;" in the class "div.center, * html div.center" of pf-if.css
  • Changed the property "background: url(../images/wp.gif) #696;" to "background: url(../images/wp-pa.gif) #69C no-repeat;" in the class "div.msgarea" of wp-pa-institution.css
  • Changed the property "background: url(../images/wp-alt.gif) #696;" to "background: url(../images/wp-pa-alt.gif) #69C no-repeat;" in the class "div.msgareaalt" of wp-pa-institution.css
  • Removed "<!--[if gte IE 7]>" , and "<![endif]-->" from the classes "div.fp, div.fpml" , "div.fpml" and "div.fiptext, div.fiptexta, div.fiptextb, div.fiptextc" in base.css
  • Removed the property "position: relative;" from the class "div.banner" in base.css
  • Removed the property "position: relative;" from the class "img.coa, img.lf" in base.css
  • Removed the properties "background-color: transparent;", and "font-weight: lighter;" from the class "div.banner p.siteuri" in base2.css
  • Removed the properties "height: 1.57em;" , "height: 1.4em;", and "min-height: 1.57em;" from the class "div.fp, div.fpml" in base.css
  • Removed the property "height: 2.7em;" from the class "div.fpml" in base.css
  • Removed the properties "padding: 5px;" , "min-height: 158px;" , and "min-width: 135px;" from the class "div.blackborder" in base-institution.css
  • Added the class "div.banner-eng, div.banner-fra" with properties "min-height: 80px" , "padding-bottom: 0px;" , and "height: 80px;" to base.css
  • Added the class "div.banner-lfcoa-eng, div.banner-lfcoa-fra" with properties "min-height: 115px;" , "padding-bottom: 0px;" , "height: 115px;" , and "margin-top: 5px;" to base.css
  • Added the class "div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div.banner-lfcoa-fra img.coa, div.banner-lfcoa-fra img.lf" with the property "display: none;" to base.css
  • Added the class "div.banner-eng p.main, div.banner-eng p.siteuri, div.banner-fra p.main, div.banner-fra p.siteuri, div.banner-lfcoa-eng p.main, div.banner-lfcoa-eng p.siteuri, div.banner-lfcoa-fra p.main, div.banner-lfcoa-fra p.siteuri" with the properties "height: 0;", "width: 0;", "overflow: hidden;", "float: right;", "font-size: 0;", "position: absolute;", and "top: -100px;" to base.css
  • Added the class "div.wrapContainer" with the properties "width: 99.5%;" and "float: left;" to base.css
  • Added the class "div.fp" with the property "min-height: 1.57em;" to base.css
  • Added the class "* html div.fp" with the property "height: 1.4em;" to base.css
  • Added the class "* html div.fpml" with the property "height: 2.7em;" to base.css
  • Added the class "* html div.banner, * html div.banner-eng, * html div.banner-fra, * html div.banner-lfcoa-eng, * html div.banner-lfcoa-fra" with the property "position: relative;" to base.css
  • Added the class "* html img.coa, * html img.lf" with the property "position: relative;" to base.css
  • Added the class "* html div.fp, * html div.fpml" with the property "overflow: visible;" to base.css
  • Added the classes "div.banner-eng, div.banner-lfcoa-eng", and "div.banner-fra, div.banner-lfcoa-fra" with the property "background: url() #FFF no-repeat center center;" to base-institution.css
  • Added the class "div.msgarea h1.hidden, div.msgareaalt h1.hidden" with the properties "height: 0;", "width: 0;", "overflow: hidden;", "float: right;", "font-size: 0;", "position: absolute;", and "top: -100px;" to wp-pa.css
  • Added the property "padding-bottom: 0.67em;" to the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" in base.css
  • Added the property "overflow: hidden;" to the class "div.fp, div.fpml" in base.css
  • Added the property "min-width: 6.6em;" to the class "div.foot1, div.foot2, div.foot3" in base.css
  • Added the property "min-width: 9.0em;" to the class "div.left, div.right" in base.css
  • Added the property "min-height: 0.9375em;" to the classes "div.prodis" and "div.footer div.footerline" in base.css
  • Added the class "div.blackborder" with the properties "padding: 5px;", "min-height: 158px;", and "min-width: 9.5em;" to base.css
  • Added the property "min-width: 12.00em;" to the class "div.page" in base.css
  • Added the property "height: 100%;" to the class "div.colLayout" in base-institution.css
  • Added the property "min-width: 18.5em;" to the class "div.mcontainter" in wp-pa.css
  • Added the property "min-height: 6.7em;" to the class "div.msgarea" in wp-pa.css
  • Added the property "min-height: 7.5em;" to the class "div.msgareaalt" in wp-pa.css

Version 1.01 - 2007-01-11

Summary of changes

  • Corrected a spelling error in the title of the bilingual and unilingual Welcome Pages templates
  • Corrected a display issue in Internet Explorer 7 where the common menu bar overlapped the breadcrumb links at larger font sizes

Updated files

  • base.css
  • wp.html
  • wp-alt.html
  • wp-alt-quebec.html
  • wp-alt-ul-fra.html
  • wp-ctoam.html
  • wp-quebec.html
  • wp-quebec-ctoam.html
  • wp-ul-fra.html
  • wp-ul-ctoam-fra.html

How to update Web pages based on version 1.0 of the template

  1. Replace base.css with the updated version of the file
  2. Perform the following global search and replace operation (excluding quotes) for all Welcome Pages using the template:
    1. Replace "Page d'acceuil" with "Page d'accueil"

Changes in detail

  • Changed "Page d'acceuil" to "Page d'accueil" in the title of bilingual and unilingual Welcome Pages
  • Added "<!--[if gte IE 7]>height: 1.57em;<![endif]-->" to the class ".fp, .fpml" in base.css
  • Added "<!--[if gte IE 7]>height: 2.82em;<![endif]-->" to the class ".fpml" in base.css
  • Added "<!--[if gte IE 7]>min-height: 16%;<![endif]-->" to the class ".fiptext, .fiptexta, .fiptextb, .fiptextc" in base.css

Version 1.0 - 2007-01-05

Summary of changes

  • Initial release.

15.0 Enquiries

Further information on the GC CLF Template or on Common Look and Feel for the Internet is available by contacting the CLF Office at the following coordinates:

Address:
Common Look and Feel Office
Service Policy & Strategy
Chief Information Officer Branch
Treasury Board of Canada Secretariat
300 Laurier Avenue West
Ottawa, Ontario K1A 0R5
Email:
clf-nsi@tbs-sct.gc.ca
Telephone:
613-952-6987
Toll free:
877-636-0656
Fax:
613-957-8020
Teletype:
613-957-9090 (TBS)

Date Modified: 2007-11-16

Top of Page
Important Notices