Right then - here you go.
This page now validates apart from the asp links - I've swapped the DTD to XHTML transitional just to be sure.
It now looks the same in FF, IE 6 and Opera 7.11. You can test other browsers for yourself!!
Here's the code for your first page - I've changed a couple of bits so you'll need to compare before and after to see what I've done. I read your comment about the Upper case CMS monster after I'd converted it all to lowercase (oh well!).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Iowa State University Dept. of Enviromental Health and Safety | Home Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Iowa State University Dept. of Environmental Health and Safety" />
<meta name="description" content="Extensive website containing health and safety information for Iowa State University" />
<meta name="robots" content="all" />
<!-- to correct Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
<style type="text/css" media="screen">@import "media/css/layout.css";</style>
<link rel="stylesheet" type="text/css"media="screen" href="media/css/layout.css" />
<link rel="stylesheet" type="text/css" media="screen"href="media/css/homecolor.css" />
<script type="text/javascript">
<!--
function SymError()
{
return true;
}
window.onerror = SymError;
var SymRealWinOpen = window.open;
function SymWinOpen(url, name, attributes)
{
return (new Object());
}
window.open = SymWinOpen;
//-->
</script>
<script type="text/javascript"></script>
</head>
<body>
<div id="layout">
<div id="nameplate">
<div id="map"><a href="http://www.iastate.edu"></a></div></div>
<div id="banner"><h4>Welcome!</h4></div>
<div id="mainmenu"><a href="default.asp?action=article&ID=18">Home</a> · <a href="default.asp?action=article&ID=19">Administration</a> · <a href="default.asp?action=article&ID=26">Biosafety</a> · <a href="default.asp?action=article&ID=201">Emergency Response</a> · <a href="default.asp?action=article&ID=68">Environmental Programs</a> · <a href="default.asp?action=article&ID=114">General Safety</a> · <br /><a href="default.asp?action=article&ID=73">Occupational Health</a> · <a href="default.asp?action=article&ID=202">Radiation Safety</a> · <a href="default.asp?action=article&ID=160">Training </a></div>
<div id="breadcrumb"> <span><!-- #include file="breadcrumb.htm" --></span></div>
<!-- Here's a new div to help position the floating bits on the page it ends before the footer - I've added the clearfix hack to it -->
<div id="mainbox" class="clearfix">
<div id="links">
<h5>Services</h5>
<p><a href="http://www.ehs.iastate.edu/oh/cheminv.htm" title="Information on chemical inventories, Chemical Inventory system login">Chemical Inventory</a> <br /><a href="http://www.ehs.iastate.edu/ep/recycle.htm" title="Chemical Redistribution Program information and login">Chemical Redistribution</a> <br /><a href="http://www.ehs.iastate.edu/oh/msds.htm" title="Material Safety Data Sheets">MSDS</a> <br /><a href="http://www.ehs.iastate.edu/hazard.asp" title="Report an observed hazard to EH&S">Report a Hazard</a> <br /><a href="http://www.ehs.iastate.edu/ep/wasteremoval.htm" title="Chemical, sharps and radiological waste removal requests">Waste Removal Request</a> </p>
<h5>Quick Links</h5>
<p><a href="../newsletter.asp" title="EH&S campus newsletter and searchable newsletter archives">Campus Newsletter</a> <br />Committees <br /><a href="http://www.ehs.iastate.edu/training/ebooks.htm" title="E-books on various topics">E-books</a> <br /><a href="http://www.ehs.iastate.edu/admin/employment.asp" title="Current job openings">Employment</a> <br /><a href="http://www.ehs.iastate.edu/forms.asp" title="Forms">Forms</a> <br /><a href="http://www.ehs.iastate.edu/admin/news.asp" title="News and News Archives">News</a> <br /><a href="default.asp?action=article&ID=25" title="Search our website">Search</a> <br /><a href="http://www.ehs.iastate.edu/library.asp" title="Manuals, booklets, newsletters, other publications">Safety Library</a> <br /><a href="http://www.ehs.iastate.edu/admin/directory.asp" title="Staff contacts and biographical information">Staff Directory</a> </p>
<p>* = external link </p>
</div>
<div id="content" >
<h4>Welcome to EH&S</h4>
<p>Welcome! EH&S is a service unit of Iowa State University, devoted to ensuring the occupational health and safety of all Iowa State personnel, students and visitors.</p>
<p>To aid in this endeavor, EH&S offers a comprehensive health and safety program, incorporating everything from fire safety to radiation safety. We offer a wide array of manuals, E-books and training sessions to ensure that Iowa State University personnel are able to receive the information they need in these areas. </p>
<p>To assist the Iowa State University community even more, we have divided the department into several programs, in order to offer more specialized resources. We are continually adding new programs and services, many web-based, in an attempt to meet the ever-changing needs of Iowa State University's faculty and staff.</p> <!-- enVivo!CMS Classic v3.54 Professional : MFY4-XTG9-VEBL-CN1Q -->
</div></div>
<div id="footer" class="clearfix">
2809 Daley Drive - Ames, IA 50011-3660 - (515) 294-5359<br />Copyright © 2005, Iowa State University, all rights reserved.
</div>
</div>
</body>
</html>
And here's the CSS for the Layout:
@charset "iso-8859-1";
body {background: #fff;margin: 0 auto; color: #000; font-style: normal; font-family: verdana, tahoma, sans-serif;line-height:110%; font-size:90%; }
#layout {width: 760px;margin: 0 auto; height:100%;}
#nameplate {background:#cacaac url('../../images/nameplate.jpg');background-repeat: no-repeat ;background-position: left top; height: 60px;font-size: 70%; padding-top: 1px; padding-bottom: 1px;}
#nameplate li {list-style:none;margin-left:-40px;}
#nameplate li a {height:35px;display:block;}
#map {width:310px;}
#banner {color:#fff;width: 100%;height: 50px;padding-top: 1px; padding-bottom: 1px;margin:0;}
#banner h4 {text-align:right;padding:15px; margin: 0 0 0 0;}
#breadcrumb {width:100%;}
#mainmenu {color:#333300; font-size: 75%; text-align:center; width:760px;background-color:#cacaac;padding-top: 1px; padding-bottom: 1px;}
#mainmenu a {color: #333300;}
#mainmenu a:hover {color: #cacaac; text-decoration: none;}
#mainmenu a:active {color: #333300; text-decoration: none;}
#mainmenu ul {list-style-type: disc;}
#mainmenu li {margin: 0 0 3px 0; display: inline;}
#links {width: 185px;font-size: 75%;float: left; margin-bottom: 20px;margin-right: 25px; }
#links h5 {font-size: 110%;margin: 0;}
#links p {margin-left: 0; font-size:100%; padding-bottom: 0; border-bottom: 1px solid #eee; line-height: 125%; padding-bottom: 5px;}
#links ul {margin-top:0; margin-left:15px; font-size:100%; padding-bottom: 5px;border-bottom: 1px solid #eee;}
#links li {display: block; line-height: 130%; list-style-type: none; margin-left:0px;}
#links li a {display: block; white-space: nowrap;margin-left: 0px;}
#links li a.c {display: inline; font-weight: normal; text-decoration: none;}
#links li a.c:hover {text-decoration: none;}
#content {padding:0 20px 0 20px;margin: 0;text-align: justify; font-size: 75%; color: #000; font-style: normal; font-family: verdana, tahoma, sans-serif;line-height: 160%;}
#mainbox {height:100%; margin:20px}
#footer{background:#cacaac; margin:0;padding: 10px;font-family: verdana, tahoma, sans serif;font-size: 75%; height: 50px;color: #fff;}
.center{text-align: center;}
h4 {text-align: justify;}
h3 span {display: none;}
h5 {font-weight:bold;font-size: 90%;}
h6 {font-weight:bold;font-style:italic;font-variant: small-caps;font-size:100%;}
p#resources {font-weight:bold; font-style:italic; font-size:100%; color:#fff; padding: 2px;}
.pub {font-style: italic;}
a {text-decoration:none;}
a:hover {text-decoration:underline overline;}
table { width: 95%;}
tr {valign: top;}
td {text-align: left;width:25%; vertical-align:top;}
th {width:25%; height:32px;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
I've messed with the CSS and consolidated it a bit (all helps with download time) and taken out anything glaring that I know won't validate but I haven't actually validated it myself!
Don't think I messed with the colour stylesheet - but you'll soon find out!
Going to lie down now for a while...
