Jump to main content or area navigation.

Contact Us

EPAFiles: Web Design

Frequent Questions

Note: EPA no longer updates this information, but it may be useful as a reference or resource.

EPA builds all web content in the Drupal WebCMS as of January 2013. All new microsites and resource directories will be created using Drupal WebCMS. There is still content on EPA's legacy servers and this content will be maintained there until it is transformed and moved into the Drupal WebCMS. This information on styles and look and feel only applies to the existing content using Template 4 or older versions of EPA's template. Information for building new content is found in the EPA Web Guide.


WebCMS

Q: Where can I get information about the WebCMS?
A: In the WebGuide.

Top of page


Style Sheets, General

Q: Should I download the style sheets and JavaScript files?
A: No. You do not need to download any of the style sheets or JavaScript files. Simply link to them.
Q: Will we all link to the same style sheet?
A: Yes.
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):
<link rel="stylesheet" type="text/css" href="http://www.epa.gov/link/to/your/css.css" />
<link rel="stylesheet" type="text/css" href="http://www.epa.gov/epafiles/css/epa-core.css" />
If you want your local styles to carry over into the printed page, add the media print:
<link rel="stylesheet" type="text/css" href="http://www.epa.gov/link/to/your/css.css" media="screen,print />
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 Template 4 style sheet now?
A: No. Fix your ROT first. If you are migrating into the WebCMS, it will be provided for free.
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. 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 and up—earlier versions of Dreamweaver (DW) do not recognize remotely linked style sheets.
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 and up 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 example code.

Top of page


Code, General

Q: What does sitewidec (or this code <p id="sitewidea"></p>) in the template mean?
A: It's code for the three-tier announcement codes. These new templates allow EPA to establish a sitewide announcement capability.
There are 2 sitewide codes:
  • sitewidea—EPA homepage and regional, program office homepages. This code is in the home page and the TROPO template.
  • sitewidec—All other pages.
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 these paragraphs in any way.
Q: How do I ensure my content code is XHTML strict-compliant?
A: In Dreamweaver 8 and up, set File –> Convert –> XHTML 1.0 Strict. See also the notes on writing XHTML. NOTE—Dreamweaver 8 and up automatically closes tags for proper XHTML.

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: Yes. Template 4 is a fixed-width template at 960px wide. The sidebar takes up 180px and there are 10px of margin on either side of the "white space", leaving 760px for your content.
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. We rely upon the browser default styling.
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: 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:
<link rel="stylesheet" type="text/css" href="http://www.epa.gov/link/to/your/css.css" media="screen,print />

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 might still look OK. But with CSS, there is no need to use tables for page layout.
Your layout tables may be affected since the new design is fixed width, and tables with widths greater than 760px will overflow. It's better to set your tables to be percentage width (80%), but that makes it harder to use tables for layout. Better to reserve your tables for data and to use CSS for your layouts.
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: 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

Top of page


Seeing Some Weirdness?

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" style="clear:none"><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.

Top of page

For help with your epa.gov web design, contact the Web Template Workgroup.

Jump to main content.