Cmich Generic Page Template
This is a very basic template. It was not constructed to meet the needs all cmich sites. You can use this as a "starter" template and modify as needed to obtain the template that best suits your site's needs. Be sure to adhere to the cmich web style guidelines when you make your modifications.
You do not have to use this template. Use a css and page layout that works for your site. Just be sure to comply with the style guide requirements.
This template validates against CSS2, XHTML 1.0 transitional markup, and section 508 Priority 1. You do not have to use either CSS or XHTML markup. If you are not using CSS, you might want to create your own table-based template.
This Template's Requirements:
- resizable text (using ems for text; and px or ems for margins, padding)
- liquid page
- XHTML 1.0 transitional
- designed for IE/Netscape 5x and above
- plays nicely with 4.x browsers (but not too nicely because people should upgrade their browsers)
- alternate css for print
- ADA Priority 1 compliant
- no Javascript needed for generic template except where "date modified" is used
- structure such that interface updates/redesigns are quick, fairly painless
- template easily modifiable by individual units for their specific needs
This template uses a cascading style sheet for both layout and presentation. It also uses FrontPage include files for the banner, optional top menus, left menu, and footer areas; replace the include files with your content, making sure to adhere to the style guidelines for the banner and footer.
Note the following:
- The left column is fixed width, the optional right column is fixed width (both widths can be changed by your webmaster), and the center column is variable width, depending on the width of the browser window.
- There is no fixed 740-px width template (although the banner minimum width remains 740 px). If you prefer a fixed width template, you will need to set the wrapper div width, then check the interior divs.
- The banner is made with table structure or css. Webmasters can choose and modify one of the banner templates. The banner stretches if the browser window width exceeds 740px.
Browser Tests:
| PC | Mac |
| IE 6.0.28, 5.5, 5, 4 | IE 5.2 -- issue: vert maroon bar does not appear |
| Netscape 7.1, 4.7 | Netscape 7.02, 4.77 |
| Opera 7.11 | Mozilla 1, 1.6 |
| Mozilla 1.4 | Safari 1.0.2 |
| Firefox 0.8 | Firefox 0.8 |
Note:
- Page set up to ignore CCS when viewed in Netscape 4.7. Renders as straight default text page plus banner in NS4.7. All content is available.
- If user increase font size, the fixed width left column may exceed the vertical maroon rule, which is positioned at 154px from left of main body. If you are designing your own template, don't use absolutely positioned vertical rules!
- The vertical maroon rule currently does not appear in Mac IE5.x browser
Why "voice-family" appears in the css:
From glish.com:
/*IE5x PC mis-implements the box model. Because of that we sometimes have to perform a little CSS trickery to get pixel-perfect display across browsers. The following bit of code was proposed by Tantek Celik, and it preys upon a CSS parsing bug in IE5x PC that will prematurely close a style rule when it runs into the string "\"}\"". After that string appears in a rule, then, we can override previously set attribute values and only browsers without the parse bug will recognize the new values. So any of the name-value pairs above this comment that we need to override for browsers with correct box-model implementations will be listed below.
We use the voice-family property because it is likely to be used very infrequently, and where it is used it will be set on the body tag. So the second voice-family value of "inherit" will override our bogus "\"}\"" value and allow the proper value to cascade down from the body tag.
The style rule immediately following this rule offers another chance for CSS2 aware browsers to pick up the values meant for correct box-model implementations. It uses a CSS2 selector that will be ignored by IE5x PC.
Read more at http://www.glish.com/css/hacks.asp */
