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.
Comments
Posted by joey on September 30, 2002, at 7:21 a.m.:
hell yeah.
Posted by w00t on September 30, 2002, at 11:59 a.m.:
Get a real job, hippie!
I mean: right on. We need more of this type of advocacy instead of academic benefits.
Posted by Karl on September 30, 2002, at 5:43 p.m.:
A DOCTYPE and a clean-up code would be better too. :)
For example you have 3 bodys. I think you are using a templating system, if you try to validate your code, you will see that it's also possible to make it standard. Step by Steph little by little you will be able to achieve the quality of your code :)
Well done for CSS.
Posted by Adrian on October 1, 2002, at 2:38 a.m.:
All in due time, Karl. :)
I've cut out those three "body"s several times, but they keep seeping back...
Posted by anonymous on May 6, 2003, at 1:34 a.m.:
the latter
Comments have been turned off for this page.