-After many interruptions ( :) ), I got this more-or-less done. I used "strict" !doctype but it validates as 'transitional' (most likely due to proprietary "scrollbars" declaration, which I left alone).
This now looks & acts the same way in Firefox 3.x and IE7. I could still go through this and condence, tweak, improve... :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- CHANGE THE NEXT THREE LINES -->
<title>Weights On The Web - Bodybuilding by Tim Wescott</title>
<meta name="Description" content="2003 Massachussetts State Master`s Bodybuilding Champion, Tim Wescott, Over 40's Bodybuilding Champion, Trainer and author of various bodybuilding and nutrition articles. Come join our live interactive forum," />
<meta name="KeyWords" content="tim wescott, bodybuilding, competition, nutrition, training, hardcore, gym, forum, posing, training articles, nutrition articles, diet, strength training, over 40's bodybuilding training, competing, 2003 Massachussetts State Master`s Bodybuilding Overall Champion, N.P.C. National Level Bodybuilder, 2x N.P.C. Masters Nationals Finalist in 2000 & 2001, 1999 Massachusettes State Champion, Photo gallery, Shop, links, Weights On The Web, NPC, NPC New England Championships, Nabba, fitness and bodybuilding, powerlifting, oldschool, forbes creatives, bodybuilding art," />
<!-- CHANGE THE ABOVE THREE LINES -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META name="Copyright" content="http://www.timwescott.com" />
<META http-equiv="Content-Language" content="en" />
<META name="Rating" content="General" />
<META HTTP-EQUIV="imagetoolbar" CONTENT="no" />
<style type="text/css">
* {margin:0; padding:0;}/*re-set everything to "zero" for cross-browser similitutde*/
BODY {scrollbar-base-color:#000; font:12px arial, geneva, verdana, sans-serif;
/* "scrollbar"-etc is IE-proprietary: other browsers ignore it */
background-color:#000; color:#000; margin:0; padding-bottom:15px;}
/*IE does not recognize margin-bottom, souse padding-bottom instead*/
a:link {text-decoration:none;} /*this Selector is inherited: no need to re-state it*/
a:link, a:visited, a:hover, a:active {background-color:#000; color:#FCB514;}/*these Values are shared, so combine the Declarations*/
/* General link behaviors */
a {}/*vailable*/
a:link {}/*available*/
a:visited {}/*available*/
a:hover {}/*available*/
a:active {}/*available*/
#wrapper {width:675px; height:auto; border:1px solid white; padding-bottom:20px; margin:2px auto 2px auto; overflow:hidden;}
#right {width:400px; height:auto; margin:20px 0 0 0; padding:4px 0 4px; float:right}
#right img {margin:10px 0 10px 20px;}
#navigation a:link, #navigation a:visited, #navigation a:hover, #navigation a:active
{background-color:#000; color:#FCB514; text-decoration:none;}/*these Values are shared, so combine the Declarations*/
#navigation {width:230px; /*border:1px solid white;*/ padding:20px 0 15px 0;}
#navigation li {text-align:center;margin:10px 0 0}
#navigation li a {color:#FCB514; font-size:1.11em;}/*inherited values: no re-state required*/
#navigation li a:link {}
#navigation li a:visited {color:red;}
#navigation li a:hover, #navigation li a:focus {letter-spacing:0.21em; color:white;}
/* "focus" above is the same as "hover", except that it is for NON-mouse event (TAB, hotkeys, handicapped access, etc)*/
#navigation li a:active {color:yellow;}
.mainPIC {width:355px; height:442px; border:1px solid gray;}
#copyright {width:98%; height:22px; margin:10px 0 6px; text-align:center; color:white;}
</style>
<script type="text/javascript" language="JavaScript" src="pop-up.js"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<base href="http://www.timwescott.com/" />
</head>
<body>
<p title="Approved Links" style="width:100%; height:20px; text-align:center; margin:5px auto 0 auto"><a href="javascript:popcontact('pop-up.htm')" style="width:300px; height:60px;">Approved Links</a></p>
<!-- start WRAPPER -->
<div id="wrapper">
<div id="right">
<img src="http://www.timwescott.com/picts/frontcover1.jpg" class="mainPIC" alt="Weights On The Web with Tim Wescott" />
</div>
<h1 title="Welcome to Weights on the Web" style="width:220px; float:left; color:#fff; text-align:left; padding-left:12px; font-size:1.2em; margin:40px 0 5px 0; ">Welcome to</h1>
<img src="picts/frontsmalllogohomepage.jpg" style="width:207px; height:53px; clear:left; margin-left:30px;" alt="Weights On The Web with Tim Wescott" />
<ul id="navigation">
<li><a title="HOME" href="http://www.timwescott.com">HOME</a></li>
<li><a title="BIO" href="http://www.timwescott.com/bio.htm">BIO</a></li>
<li><a title="GALLERY" href="http://www.timwescott.com/gallery.htm">GALLERY</a></li>
<li><a title="FORUM" href="http://timwescott.proboards18.com/index.cgi" target="_blank">FORUM</a></li>
<li><a title="CONTACT" href="http://www.timwescott.com/contact.html">CONTACT</a></li>
<li><a title="MYSPACE" href="http://www.myspace.com/weightsontheweb" target="_blank">MYSPACE</a></li>
<li><a title="ARTICLES" href="http://www.timwescott.com/articles/articlestoread.html">ARTICLES</a></li>
<li><a title="SHOP" href="http://www.cafepress.com/old__school" target="_blank">SHOP</a></li>
</ul>
</div><!-- end WRAPPER -->
<p id="copyright" title="All Photos and Articles Copyright Tim Wescott © 2008 / All Rights Reserved">All Photos and Articles Copyright Tim Wescott © 2008 / All Rights Reserved.</p>
</body>
</html> I did change the width of this, from "700" to "675px" as we're no longer using TABLEs here, and we lose that cellpadding/cellspacing and etc..
I marked-up the tags a bit, to make them readable to Accessibility user-agents, indexing, etc..
questions? -ask! :)
enjoy!