Most important, use a valid DTD (http://www.w3.org/QA/2002/04/valid-dtd-list.html) which will put IE in standards mode (http://www.w3.org/International/articles/serving-xhtml/#quirks)
I would suggest using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>The Major Company</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="bassco.css" rel="stylesheet" type="text/css">
<link href="floating.css" rel="stylesheet" type="text/css">
</head>
Now IE and FF look the same, but the text is still being pushed down.
Add to css:
.cright img {display:block;}
Your css is very bloated.
Instead of:
.black-4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 4pt;
font-weight: bold;
color: #000000;
}
.black-6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 6pt;
font-weight: bold;
color: #000000;
}
.maroon-12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #98002E;
}
/* more of the same */
do this:
html, body, table {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt; /* should use relative units http://www.w3.org/QA/Tips/font-size */
font-weight: bold;
color: #000;
background: #fff; /* always define this to override users color */
}
.black-4 {
font-size: 4pt;
}
.black-6 {
font-size: 6pt;
}
.maroon-12 {
font-size: 12pt;
color: #98002E;
}
http://www.websiteoptimization.com/speed/7/
http://www.orderedlist.com/articles/writing_lean_css
Another bloated area is the table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
/* cascading style sheet */
html, body, table {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt; /* should use relative units http://www.w3.org/QA/Tips/font-size */
font-weight: bold;
color: #000;
background: #fff; /* always define this to override users color */
}
table {
border: 3px inset rgb(145, 0, 0);
width: 450px;
/* height: 403px; */
padding:3px 3px 3px 15px;
}
table a {
text-decoration: none;
color: rgb(0, 0, 128);
}
.completed a {
color: rgb(0, 128, 0);
}
-->
</style>
</head>
<body>
<table summary="Major Assignments">
<colgroup>
<col width="50" style="padding:3px 3px 3px 15px;"><col width="50"><col width="95"><col width="190"><col width="18">
</colgroup>
<tbody>
<tr><td>5001</td><td><a href="o_revassn.php?Anum=5001">05-30</a></td><td><a href="o_revassn.php?Anum=5001">51, Rebecca</a></td><td><a href="o_revassn.php?Anum=5001">Tecate and Jacumba</a></td><td><a href="o_revassn.php?Anum=5001">2:2</a></td></tr>
<tr><td>5002</td><td><a href="o_revassn.php?Anum=5002">05-27</a></td><td><a href="o_revassn.php?Anum=5002">64, John</a></td><td><a href="o_revassn.php?Anum=5002">15 Corridor & Ballast Point</a></td><td><a href="o_revassn.php?Anum=5002">16:11</a></td></tr>
<tr class="completed"><td>5013</td><td><a href="o_revassn.php?Anum=5013">05-15</a></td><td><a href="o_revassn.php?Anum=5013">26, Regina</a></td><td><a href="o_revassn.php?Anum=5013">Interim - Central</a></td><td><a href="o_revassn.php?Anum=5013">9:9</a></td></tr>
</tbody>
</table>
</body>
</html>
To align the values in the last column use or as a style in the last <col>:
td {
text-align:":";
}
unfortunately no browser supports this yet.
This function does the same:
<script type="text/javascript">
<!--
onload=function() {
var aTD=document.getElementsByTagName('tr');
for(var i=0; i<aTD.length; i++) {
var oAnchor=aTD[i].getElementsByTagName('td')[4].firstChild;
if(oAnchor.firstChild.data.indexOf(':')==1) {
oAnchor.style.paddingLeft='0.5em';
}
}
}
//-->
</script>