Jump to main content.

Frequent Questions

Why are we switching to template 3? What are some of the differences between the new template and the old one (2.1.1)?

Style Sheets, General

Q: Should I download the style sheets and JavaScript files?
A: No. If you have Dreamweaver 8, you do not need to download any of the style sheets. We recommend that you do not download local copies.
If you have a dynamic environment or an older version of Dreamweaver, downloading the style sheets may help you. If you do require local copies, you are responsible for making sure you have the most current versions.
Do not download the JavaScript files.
Seven external files drive our new template. Do not edit them in any way.
  1. master (epa.css)
    • The master style sheets links to epa-content.css
  2. hacks for Internet Explorer, version 6 and under (ie.css)
  3. (For AA/RA or Topic home pages only [aara.css])
  4. print version (print.css)
  5. a JavaScript file holding some core EPA functions (epa-core.js). There is no need to download this file.
  6. a second JavaScript file currently holds the code for the ACSI Survey and may, in the future, hold extra functions (extra.js), but does not otherwise affect the look-and-feel. There is no need to download this file.
Q: Will we all link to the same style sheet?
A: Yes, all pages using EPA's look and feel template will link to epa.css.
Q: I have local styles. What do I do about them? (Or: Where in the code should I call my local style sheet?)
A: Directly before the call to the master style sheet (as shown in this code sample):
<style type="text/css" media="screen">@import 'http://www.epa.gov/yourproject/styles/yourlocalcss.css';</style>
<style type="text/css" media="screen">@import 'http://www.epa.gov/epafiles/s/epa.css';</style>
Best practice is to import the style sheet as shown in the code sample above. This hides the styles from old browsers.
If you want your local styles to carry over into the printed page, add the media print:
<style type="text/css" media="screen,print">@import 'http://www.epa.gov/yourproject/styles/yourlocalcss.css';</style>
Q: Can I use a relative link for a local style sheet?
A: Yes.
Q: How do I code local style sheets?
A: Every class in your local style sheet must be preceded with #content, as shown below. This ensures that your local styles touch only your content area and not the rest of the EPA look-and-feel. Notice that even in declarations that set two rules for multiple elements, #content precedes each element.
#content .newsdiv, #content .recadds { padding-bottom: 2px; width: 100%;}
#content .nopad { margin: 0; padding: 0;}
Q: Can I use the style sheet now?
A: Yes. It is required for all new pages.
Q: Can we use embedded or inline styles?
A: Yes, but it defeats the purpose of separating style from content. The best practice is to add styles to your local style sheet.
Q: What happens to boxes when the text is scaled?
A: The box scales vertically along with the text.
Q: Is the double > in the breadcrumbs a single character?
A: It is a small graphic () called by the style sheet. Link to it, if you like, or use &raquo; (»). Note: You will not see this graphic in Dreamweaver Design View, but it's there.

Top of page

Dreamweaver

Q: Why can't I see the styles in Dreamweaver "Design View"?
A: Styles will only appear in Design View in Dreamweaver version 8 (the most current)—earlier versions of Dreamweaver (DW) do not recognize remotely linked style sheets. We recommend an upgraded to Dreamweaver 8 because you will be able to easily choose styles from the Properties dialog. If you cannot upgrade, you may download a copy of the master style sheet for your development environment. It is your responsibility for keeping your copy current without altering it in any way.
Q: When will we need to upgrade to Dreamweaver 8?
A: You won't. It is a de facto standard at EPA, but is not required. There are other useful HTML editors.
Q: Why isn't there a Dreamweaver template for AA/RA home pages?
A: Generally, you only have one AA/RA home page for an area, so you only need a single HTML file.
Q: Can Dreamweaver code XHTML?
A: Yes, in DW8 you can convert a page with the File –> Convert –> XHTML 1.0 Strict. However, with the new template this is not necessary as the DOCTYPE is already set for you. For existing pages, you may need to use the File –> Convert –> XHTML feature to convert your content code after it is placed in the new template.
Q: Can the sidebar links be in a library item?
A: Yes. As can the area footer and other bits of code. We offer a small Code Library with examples.

Top of page

Code, General

Q: What does sitewidec (or this code <p id="sitewidec"></p>) in the template mean?
A: It's code for the three-tier announcement codes. The move to a new template allows EPA to establish a sitewide announcement capability. There hasn't been a need for a site-wide announcement (yet), and it is expected to be used only in extreme cases.
There are 3 sitewide codes:
The top-level announcement, sitewidea, is used most often with information about, for example, server maintenance notices. An EPA.gov-wide (sitewidec) notice has never been posted.
Do not remove or modify this line in any other way.
Q: How do I ensure my content code is XHTML strict-compliant?
A: In Dreamweaver 8, set File –> Convert –> XHTML 1.0 Strict. See also the notes on writing XHTML. NOTE—Dreamweaver 8 automatically closes tags for proper XHTML.
Q: How do you use the smaller exit graphic?
A: Please note that the smaller exit graphic is the exception, and not the rule. If you are granted permission to use it, link to the smaller graphic in the same manner as the current exit graphic is linked.

Top of page

Style, General

Q: What styles can I use?
A: See the list of available master styles.
Q: Do we design to a default size/resolution?
A: 800 X 600 is the recommended minimum window size. If your content calls for a set width, define that in your local style sheet.
For example, your local style sheet might define the width of a special column as: #content p.narrow {width:450px;}. In the page code, write <p class=”narrow”>special narrow text…</p>
Q: The bulleted list doesn’t have as much indent inside of boxes.
A: Correct. There's not as much space in boxes, so we narrowed the indent.
Q: Is there a standard bullet style?
A: Yes. The standard bullet (and lists) was approved by the Web Council.
Q: Since Verdana is wider, do you anticipate many problems on pages?
A: Verdana is easier to read and solves problems with resizing text. There haven't been any problems to date. If you find one, please let us know.
Q: Is Verdana universally available?
A: Yes, even on Macs. If none of the listed fonts are available, browsers will default to "san-serif."
Q: Will the style sheet automatically indent paragraphs?
A: No.

Top of page

Printing

Q: What happens if I press Ctrl-p (or File > Print)?
A: You will print a print-friendly version of your web page. This version strips out the sidebar and other Web navigation elements that use space on paper but don't contribute to the content.
Try printing the page and see!
Q: What do boxes look like in print version?
A: Boxes retain their color and positioning.
Q: I have a lot of links, and, as a service to my readers, I want the printed page to show their URLs. How do I do that?
A: Wrap the relevant section of your code in a div with an id of "printURLs". Here's an example:
<div id="printURLs">
	{content with lots of links here}
</div>
Any links within this div will have its URL spelled out in the print version.
Q: What happens if I click on the "Print As-Is" link at the bottom of the page?
A: You will print a WYSIWYG version of your web page. All of the colors, the sidebar links, the search box, etc., will be preserved and printed.
Click on the link only once. A message will pop up: "This document will now print as it appears on screen. Refresh this page to return to original state." After clicking the link once, print your page as you normally do.
Q: My local styles don't show up when I print?
A: If you want your local styles to carry over into the printed page, add the media print:
<style type="text/css" media="screen,print">@import 'http://www.epa.gov/yourproject/styles/yourlocalcss.css';</style>

Top of page

Tables or no tables?

Q: Must we get rid of all tables?
A: No, but we recommend removing tables used solely for layout—they can present accessibility problems for people using screen readers if not coded properly. They're also a mess to change—you have to edit every page where they're present.
Q: What if I use tables for layout now? Will my content look OK?
A: You can continue to use tables where they currently exist. Your content will still look OK. But with CSS, there is no need to use tables for page layout. We have developed 2 and 3-column layout samples.
Q: How can we make something that looks like a table without using a table elements (for lists of names and phone numbers, for instance)?
A: Oooh. Don't try: creating a table-like look in CSS is not well-supported and is very hard. Besides, a list of names and phone numbers and other data are valid uses of table elements. Here are some examples of data tables.

Top of page

Accessibility

Q: Is this template really more accessible?
A: Yes. Some of the reasons are outlined here.

Top of page

Seeing Some Weirdness?

Q: Some of my breadcrumb arrows are missing in IE, but not in Firefox.
A: Yes, it's unfortunate. The arrows drop to the next line when a long breadcrumb link wraps to the next line.
This issue was a major stumbling block in the release of Template 3.2.1. The original fix caused IE to crash if the reader's browser window was not as wide as the longest breadcrumb, and it took us a while to isolate the issue. You can understand if we're a bit gun-shy.
A fix has been found, but we're simply holding off on it for now.
Avoiding the dropped breadcrumb arrow is easiest when you write short breadcrumb text.
Q: I have this giant block of white space above my "Top of Page" link.
A: You mean, like this?

Top of Page

That's because the "Top of Page" style is set to clear all floats. That means all "Top of Page" links will get pushed down below any floated element, like the boxmulti or the "imgcontainer-r" (like the example photo above). We set it this way because it allows the page to "start over" if you will. It's quite useful, but sometimes not so much.
(This effect is most notable at wider screen resolutions [or smaller text-size].)
To "fix" it, you can add the following to your "top of page" HTML:

<p class="pagetop clear"><a href="#content">Top of Page</a></p>

This forces the top of page link to wrap around the floated box, just like the text above it.
Q: I get two "New!" icons!
A: This repetition typically occurs when you've converted from Template 2 to 3. Most often, you've left the <script> that called the "newbieflag.js" file in the <head> of your document. Since Template 3 includes the newbie code automatically, you need to remove any code that uses the old method of calling the "New!" icon.
Full new icon standard

Top of page

For help with these pages, contact the Web Redesign Workgroup.

Local Navigation

Jump to main content.