<html xmlns:un="http://usablenet.com/namespaces/508_rules">
   <link rel="stylesheet" href="josh.css">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   
      <title>Detailed View for rule: Use relative units in CSS</title>
      <!--
  508/W3C Accessibility Suite OEM V2 for Macromedia Dreamweaver
  (C) Copyright 2001-2005 UsableNet Inc. All rights reserved.
  -->
   </head>
   <body bgcolor="#ffffff">
      <div id="Description">
         <table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
            <tr>
               <td valign="top" nowrap="true" class="name">Use relative units in CSS</td>
               <td valign="top" nowrap="true" class="compatibility">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
            </tr>
            <tr>
               <td valign="top" align="right" nowrap="true" colspan="2" class="requirements">WAI / WCAG 1.0 Priority 2 checkpoint 3.4</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Description</b><br>
                  
                  
                  <p>The page refers to CSS properties  that are
                     specified using absolute units (such as 'in', 'px', 'mm') rather
                     than relative units (such as '%', 'em'). These units are used
                     in STYLE attributes or in external CSS files linked to via the
                     LINK element.
                     	 
                  </p>
                  
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>How to fix</b>
                  
                  <p>Use relative rather than absolute units in  style sheet
                     property values. Replace all occurrences of units like 'px',
                     'pt', 'pc', 'cm', 'mm' with percentages or 'em'.
                     	 
                  </p>
                  
                  	 
                  <p>
                     	 Use absolute units only when the type of device that
                     	 will be used by the website visitor is certain (like a webTV), or
                     	 in cases where the object to be displayed has a geometry that
                     	 cannot be changed without becoming distorted (like a
                     	 gif image).
                     	 
                  </p>
                  	 
                  <p>
                     	 It is best to avoid using absolute units for font size.
                     	 
                  </p>
                  
                  
               </td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td colspan="2" class="clearseparation">&nbsp;</td>
            </tr>
            <tr>
               <td valign="top" colspan="2" class="description"><b>Issue Explanation</b><br>
                  
                  
                  <p>Whenever possible it is best to use relative units.
                     	 
                  </p>
                  
                  
                  <p>
                     In this way the visual layout of the page will be "liquid", in the
                     sense that it can adapt to the specific browser being used, the
                     specific screen that supports it, and the font size that a user might
                     want to select as a default.
                     
                  </p>
                  
                  
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>