Troubleshooting

As you work with the new University templates, you may find that they are a little less forgiving than the old Living, Learning, Working, etc. templates. Those templates used a lot of hard fixes (for example, invisible pixel.gifs) to force content into the right place. This technique gets the job done, but it also adds a lot of unnecessary "weight" to the coding of those pages.

The new templates rely on style sheets to control their look and feel. As a result, some of the coding laziness that we've all been able to get away with before may not look so good now. Below is a list of the most common issues with the new templates, and how to correct them. If you need additional help with template issues, please contact the University Web Editor.

Closing your paragraph tags

In HTML, the closing </p> tag has always been optional. So obviously, sometimes people close them, and sometimes they don't. In the new templates, however, the <p> tag controls the left and bottom margin settings, and leaving them open can make your content have more or less margin space than you might be expecting. It has always been a good rule of thumb to close your paragraph tags, so now is as good a time as any to start.

Table widths

If the main body of your page looks like it is extending beyond the top and bottom borders of the page, the most likely reason is that you have a table or table cell width defined that is too big for the main body of the page. The maximum width for a table in the main body of the narrow menu template is 620 pixels; in the wide menu and 3-column templates, it is 490 pixels.

Images

You may find that if you use images on your site, they are bumping up against the side menu or the top menu. That is because there is no set margin defined for images (since it is impossible to predict how people may want to use them).

One easy way to correct this is to add the hspace attribute to your <img> tag. This will add horizontal space to the left and right of your images.

<img src="image.jpg" alt="description of image" border="1" hspace="10">

Another way to fix this is to add a style to your style sheet that adds margins to <img> tags.

#mainbody img {margin-left: 20px;}

Lastly, you could simply put the image inside a paragraph. That way the margins will be handled by the paragraph.