Development & External Affairs


Sample FAQs

Markup questions

Stylesheet questions

How do I make an item in the left navigation change state?

The left navigation is made up of lists that contain anchor links. To change the state of these links to make it look like you're on that particular page, simply write "class='lit'" in the anchor link. For example; the link "FAQs" is made to look active in this page's left navigation by using this markup: <a href="faqs.html" class="lit">sample FAQS</a>

My text looks HUGE! What's wrong?

All text in this site must be contained in a tag. Put your text in an HTML tag such as a paragraph <p></p>, an "H" <h1></h1> tag. When text is not contained in a tag, the default style for text takes over declaring that it should be 100% of the standard size for text on the web - which happens to be 16 pixels high. This is done in order to help prevent the font size from "cascading" smaller and smaller until it becomes illegible when a user chooses to shrink text via the browser.

Why aren't my table columns evenly spaced?

The style controlling a table detail's width is "inline," and therefore must be set by hand in the markup. You must select the width of all the "tds" contained in the top row of the table in question. The sum of these tds should total 100%.

Here's a sample:

 <td style="width: 33%;">content here</td>
 <td style="width: 33%;">content here</td>
 <td style="width: 33%;">content here</td>

You can use "width='33%'" instead, but this is depreciated markup and should therefore probably be avoided.

How do I get rid of the right column?

Unlike your basic table column, the div "centercontent" would fill the whole page if it wasn't given margins to make room for the right and left columns. These are the margin numbers for "centercontent" as specified by the external stylesheet:

margin: 0px 197px 0px 182px;

...which is shorthand for this:

margin-top: 0px
margin-right: 197px
margin-bottom: 0px
margin-left: 182px

(The numbers read clockwise staring from the top. This is the rule whenever you see 4 numbers in a row like this in the stylesheet)

To get rid of the right column, you would first remove the right column div from the markup of the page: <div id="rightcolumn"></div>

..Then you would add this "embedded" style right under where you're calling the external stylesheet on the page:
#centercontent {margin: 0px 20px 0px 182px;}

You could also use this:
#centercontent {margin-right: 20px;}

Basically - you're shortening the right margin so that centercontent can spread to 20 pixels before the page ends. You're doing this by essentially "overriding" what the external stylesheet is telling centercontent's right margin to be.

You can see this in action on the site map which is missing the right column.

In the same way, you could also get rid of the left column if you wanted to by removing:
<div id="leftcolumn"></div> from the markup and then adding this under the call to your external stylesheet:
#centercontent {margin-left: 15px;}

I created an element but it doesn't show on the page. I demand an explanation.

All text in this site must be contained in a tag. Check to see that all tags are closed.

What's a "label?"

Labels help visually impaired people and other disabled people who use screen readers associate words to their respective form elements such as text inputs or drop-down menus. When using a table to organize online forms, there's simply no other way for many people to know that "First Name" for example should go with a particular text input field except by using a label. See labels in action by visiting the form elements page

What's the difference between "pixels" and "ems" and why are both used?

Pixels are absolute and ems are relative. IE 6 will scale ems but not pixels. Pixels are therefore used for things that would look bad scaled up such as the menus etc. From the standpoint of accessibility, it is preferable to use ems (or percentages) over pixels.

What does "box model hack" mean?

The box model hack is used to fix a rendering problem in pre-IE 6 browsers, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

width: 100px;
border: 5px;
padding: 20px;

This means that the total width of this box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except IE 6 and earlier browsers. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack is simply a loop in the Css that can be used to fix this inconsistancy.

How do I change measurements when all I see are four numbers in a row?

As mentioned above, you read measurements in Css clockwise starting from the top.


#centercontent {
margin: 0px 197px 0px 182px;
} shorthand for this:

#centercontent {
margin-top: 0px
margin-right: 197px
margin-bottom: 0px
margin-left: 182px

Where do I get the numbers to change colors?

The numbers used for colors in stylesheets are called "hex" values. They're shown as 6 numbers, letters or a combination of letters and numbers.

When you see only three numbers or letters, this is shorthand for adjacent double letters. For example, the color #ccff66 may be shortened to #cf6.

You can sometimes find color charts with hex values on the web, but the colors they show are generally limited in number. Image editing programs like Photoshop will show you hex values for virtually any color you can make.

latest news
upcoming events
call to action