adrian holovaty

September 28, 2002, 11:40 PM ET

CSS in the real world: ajc.com's 'News Break'

At work, I'm slowly converting page templates to use CSS instead of messy spacer GIFs, nested tables, and FONT tags. (Our news producers work directly in HTML code, so it's especially important for the code to be clean.) The first victim: The "News Break" section on ajc.com's home page.

Before:

<table width=105 cellpadding=1 cellspacing=0 border=0 bgcolor="336699">
<tr valign=top><td width=105 align=center>
<font face=arial,helvetica size=-1 color=white><b>News Break</b></font></td></tr>
<tr valign=top><td>
<table cellpadding=5 cellspacing=0 border=0>
<tr valign=top bgcolor=white>
<td><a href="/ajc/living/movies/0902/24barber.html"><img src="/ajc/home/images/barbershop0925.jpg" width=100 height=81 border=0></a></font><br>
<font size=1 face=arial,helvetica color=black>Ice Cube</font><br>
<img src="/ajc/images/spg.gif" width=80 height=2><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/living/movies/0902/24barber.html"> <font face=arial,helvetica size=2>
Jackson wants 'Barbershop' jokes cut.</a></font><br>
<img src="/ajc/images/spg.gif" width=80 height=4><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/living/0902/25bodrov.html"> <font face=arial,helvetica size=2>
Russian actor missing in avalanche.</a>
</font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/sports/0902/25stewart.html"> <font face=arial,helvetica size=2>
Tony Stewart cleared of Bristol accusation.</a>
</font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/news/0902/24gator.html"> <font face=arial,helvetica size=2>
Gator bites off Fla. man's arm.</a></font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/business/market/0902/24wallstreet.html"> <font face=arial,helvetica size=2>
Dow hits four-year low.</a></font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/sports/0902/24webster.html"> <font face=arial,helvetica size=2>
Steeler great Mike Webster dead.</a> </font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/living/music/0902/24abba.html"> <font face=arial,helvetica size=2>
10 reasons why Abba is still popular.</a><font size=1 face=arial,helvetica color=#cc0000"> POLL</font><br>
<hr width=75% noshade size=1>
<font size=1 face=arial,helvetica color=#cc0000">EMMYS</font><br>
<img src="/ajc/images/redarrow.gif" width=6 height=5> <a href="/ajc/living/tv/0902/23emmys.html"> <font face=arial,helvetica size=2>
Photo galleries from the awards.</a><br>
</td></tr></table></td></tr></table>

After:

<div id="newsbreak">
<h3>News Break</h3>

<p><a href="/ajc/sports/braves/0902/28braves.html"><img src="/ajc/home/images/minitiger0929.jpg" width="100" height="89" border="0" alt=""></a></p>

<ul>

<li><a href="/ajc/sports/0902/29ryder.html">Tiger leads U.S. rally at Ryder Cup</a></li>

<li><a href="/ajc/sports/0902/27suspended.html">UGA, Tech, GSU players suspended</a></li>

<li><a href="/ajc/news/0902/29major.html">Former Prime Minister John Major admits 4-year affair</a></li>

<li><a href="/ajc/sports/0902/29huggins.html">Cincinnati coach Huggins suffers heart attack</a></li>

<li><a href="/ajc/business/0902/28adnext.html">And now, TV ads in the bathroom</a></li>

<li><a href="/ajc/news/0902/28videomom.html">Mom taped hitting child faces 2nd arrest</a></li>

</ul>
</div>

Which code would you rather work in when there are four breaking news stories on the wire simultaneously and millions of readers are flooding your site, expecting up-to-the-minute updates?

Style sheets let online news producers focus on news. If you manage a news site, do yourself a favor and separate content from presentation.