Tom Mollerus' Weblog

So I started off with code similar to the following. Note the uppercase tags and the use of spacer gifs (ugh!).

<TABLE WIDTH="100%" BGCOLOR="#DCE6ED" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="right" COLSPAN="3"><IMG SRC="/images/column_heads/featured_faqs.gif" ALT="Featured FAQs" BORDER="0"><BR>
<IMG SRC="/images/transparent.gif" WIDTH="1" HEIGHT="8" BORDER="0"></TD>
</TR>
<TR>
<TD><IMG SRC="/images/transparent.gif" WIDTH="18" HEIGHT="1" BORDER="0"></TD>
<td class="contentSm"><A HREF="/faqs/faq.html">Headline</a><BR>
Teaser text<BR>
<IMG SRC="/images/transparent.gif" WIDTH="1" HEIGHT="7" BORDER="0"><BR>
</td>
<TD><IMG SRC="/images/transparent.gif" WIDTH="8" HEIGHT="1" BORDER="0"></TD>
</TR>
<TR>
<TD><IMG SRC="/images/transparent.gif" WIDTH="18" HEIGHT="1" BORDER="0"></TD>
<td class="contentSm"><A HREF="/faqs/faq.html">Headline</a><BR>
Teaser text<BR>
<IMG SRC="/images/transparent.gif" WIDTH="1" HEIGHT="7" BORDER="0"><BR>
</td>
<TD><IMG SRC="/images/transparent.gif" WIDTH="8" HEIGHT="1" BORDER="0"></TD>
</TR>
<TR>
<TD></TD>
<TD ALIGN="right"><img src="/images/arrowleft.gif" width="15" height="12"><A HREF="#faqs">More Related FAQs</A></TD>
<TD></TD>
</TR>
</TABLE>

The first thing that I changed was to use a div instead of a table. And do you notice that light blue background color I specify for the table? I use that all over the site, and realized that it would be very convenient to specify it as a style.

<div class="blue">
	
</div>

And the graphical header near the top and the link in the footer, both right-aligned? Those can be placed with divs as well.

<div class="blue">
	<div style="text-align: right;">
		<img src="/images/column_heads/featured_faqs.gif" alt="Featured FAQs" border="0" />
	</div>
	<div style="margin-top: 8px; text-align: right;">
		<img src="/images/arrowleft.gif" width="15" height="12"><A HREF="#faqs">More Related FAQs</A>
	</div	
</div>

Now all I need to do is to replace my table rows with an internal div that specifies the correct left and right margin. I also put each headline in its own div so that I can put 7 pixels of space above each of them. Finally, all tags are lower case and are closed, as per the XHTML specs (closed means that <br /> tags have their own slash in them since there's not another closing tag.)The final code is below.

<div class="blue">
	<div style="text-align: right;">
		<img src="/images/column_heads/featured_faqs.gif" alt="Featured FAQs" border="0" />
	</div>
	<div class="contentSm" style="margin: 0px 8px 0px 18px;">
		<div style="margin-top: 7px;">
			<A HREF="/faqs/faq.html">Headline</a><BR>
			Teaser text<br />
		</div>
		<div style="margin-top: 7px;">
			<A HREF="/faqs/faq.html">Headline</a><BR>
			Teaser text<br />
		</div>
	</div>
		<div style="margin-top: 8px; text-align: right;">
			<img src="/images/arrowleft.gif" width="15" height="12"><A HREF="#faqs">More Related FAQs</A>
		</div	
</div>