I noticed the page wasn't working correctly in IE 6 (on another computer), so I changed some of the markup. I couldn't double-check this in IE6 as I don't currently have if on my computer. It's important that the page be rendered in quirks mode in IE 6 which is why the xml declaration is used at the top of the page. In addition, I added in the #top-inner and #bottom-inner divs and removed the #wrap div. The bellow code is the top and bottom parts, but jumps over the main content.
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Names of the Roberson Family</title>
<meta name="DESCRIPTION" content="Alphabetical list of surnames on the Roberson family genealogy site." />
<meta name="keywords" content="ancestory, family tree,Roberson Family" />
<link rel="stylesheet" href="/style/genealogy.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Bill Roberson" />
<meta name="contact" content="webmaster@roberson-family.com" />
<link rel="shortcut icon" href="http://www.roberson-family.com/img/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/ico" href="/img/favicon.ico" />
<!-- force quirks mode with the xml prolgoue -->
<style type="text/css">
/* commented backslash hack v2 \*/
html, body {
height:100%;
}
/* end hack */
html, body {
margin:0;
padding:0;
}
#top {
position:fixed;
top:0;
left:0;
z-index:999;
height:180px;
width:100%;
text-align:center;
}
* html #top {
position:absolute;
}
#top-inner {
height:180px;
background-image:url('/img/gen/niceblue.gif');
}
* html #top-inner {
margin-right:17px;/* for scrollbar*/
}
* html body {
padding-top:180px;
}
* html, * html body {
overflow-y: hidden;
height:100%;
margin-top:-180px;
}
#middle {
position:relative;
z-index:2;
padding-top:180px;
padding-bottom:80px;
width:770px;
margin-left:auto;
margin-right:auto;
}
* html #middle {
height:100%;
width:770px;
margin-left:auto;
margin-right:auto;
overflow:auto;
overflow-y:scroll;
position:relative;
z-index:2;
padding-top:180px;
padding-bottom:80px;
}
#bottom {
position:fixed;
bottom:0;
left:0;
z-index:999;
width:100%;
height:80px;
}
* html #bottom {
position:absolute;
}
#bottom-inner {
height:80px;
text-align:center;
background-image:url('/img/gen/niceblue.gif');
}
* html #bottom-inner {
margin-right:17px;/* for scrollbar*/
}
#alpha {
width:720px;
text-align:center;
}
table.name {
width:720px;
padding:0;
margin:0;
text-align:left;
}
#alpha td {
/*width:230px;*/
padding:0;
margin:0;
white-space: nowrap;
}
#alpha tr {
/*width:710px;*/
text-align:left;
padding:0;
margin:0;
}
th.names {
background-color:transparent;
color:black;
text-align:left;
width:240px;
padding:0;
margin:0;
}
td.surname {
font-weight:bold;
width:33%;
}
#alpha td.person {
width:33%;
font-size:medium;
text-align:left;
padding-left: 10px;
}
h3 {
margin-top:0;
padding-top:0;
margin-bottom:0;
}
p.alphalink {
margin-top:0;
padding-top:0;
font-size:medium;
margin-bottom:0;
}
table.test01 {
width:770px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="top">
<div id="top-inner">
<div id="mast">
<a href="http://www.roberson-family.com"><img src="/img/family4.png" width="200" height="50" alt="Roberson Family" title="Roberson Family" /></a><br />GENEALOGY
</div><!-- close mast div -->
<h3>Name List</h3>
<p class="alphalink"><a href="#aa">No Surname</a>, A, <a href="#b">B</a>, <a href="#c">C</a>, <a href="#d">D</a>, E, F, <a href="#g">G</a>, <a href="#h">H</a>, I, <a href="#j">J</a>, <a href="#k">K</a>, <a href="#l">L</a>, <a href="#m">M</a>, N, O, P, Q, <a href="#r">R</a>, <a href="#s">S</a>, <a href="#t">T</a>, U, <a href="#v">V</a>, W, X, Y, Z, </p>
<table class="test01" style="text-align:center;">
<tr>
<td width="*"> </td>
<th class="names"><h2>Name</h2></th>
<th class="names"><h2>Born</h2></th>
<th class="names"><h2>Died</h2></th>
<td width="*"> </td>
</tr>
</table>
</div><!-- close top-inner div -->
</div><!-- close the fixed top div -->
<div id="middle">
<div id="namedisplay">
<div id="alpha">
<table ...
... </table>
</div><!-- close alpha div -->
</div><!-- close namedisplay div -->
</div><!-- close the scrolling middle div -->
<div id="bottom">
<div id="bottom-inner">
<div id="footer">
<p><a href="/genealogy/g_index.php" target="_top">Table of Contents</a> | <a href="/genealogy/surnames.php" target="_top">Surnames</a> | <a href="/genealogy/names_frame.php" target="_top">Name List</a></p>
<p class="xxs">This Website was Created Jul 12, 2008 with <a href="http://www.coffeecup.com/html-editor/" target="_top">HTML Editor 2008</a> from <a href="http://www.coffeecup.com" target="_top">CoffeeCup Software</a></p>
</div><!-- close footer div -->
</div><!-- close bottom-inner div -->
</div><!-- close the fixed bottom div -->
</body>
</html>
<!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" xml:lang="en" lang="en">
<head>
<title>Names of the Roberson Family</title>
<meta name="DESCRIPTION" content="Alphabetical list of surnames on the Roberson family genealogy site." />
<meta name="keywords" content="ancestory, family tree,Roberson Family" />
<link rel="stylesheet" href="/style/genealogy.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Bill Roberson" />
<meta name="contact" content="webmaster@roberson-family.com" />
<link rel="shortcut icon" href="http://www.roberson-family.com/img/favicon.ico" type="image/x-icon" />
<link rel="icon" type="image/ico" href="/img/favicon.ico" />
<!-- force quirks mode with the xml prolgoue -->
<style type="text/css">
/* commented backslash hack v2 \*/
html, body {
height:100%;
}
/* end hack */
html, body {
margin:0;
padding:0;
}
#top {
position:fixed;
top:0;
left:0;
z-index:999;
height:180px;
width:100%;
text-align:center;
}
* html #top {
position:absolute;
}
#top-inner {
height:180px;
background-image:url('/img/gen/niceblue.gif');
}
* html #top-inner {
margin-right:17px;/* for scrollbar*/
}
* html body {
padding-top:180px;
}
* html, * html body {
overflow-y: hidden;
height:100%;
margin-top:-180px;
}
#middle {
position:relative;
z-index:2;
padding-top:180px;
padding-bottom:80px;
width:770px;
margin-left:auto;
margin-right:auto;
}
* html #middle {
height:100%;
width:770px;
margin-left:auto;
margin-right:auto;
overflow:auto;
overflow-y:scroll;
position:relative;
z-index:2;
padding-top:180px;
padding-bottom:80px;
}
#bottom {
position:fixed;
bottom:0;
left:0;
z-index:999;
width:100%;
height:80px;
}
* html #bottom {
position:absolute;
}
#bottom-inner {
height:80px;
text-align:center;
background-image:url('/img/gen/niceblue.gif');
}
* html #bottom-inner {
margin-right:17px;/* for scrollbar*/
}
#alpha {
width:720px;
text-align:center;
}
table.name {
width:720px;
padding:0;
margin:0;
text-align:left;
}
#alpha td {
/*width:230px;*/
padding:0;
margin:0;
white-space: nowrap;
}
#alpha tr {
/*width:710px;*/
text-align:left;
padding:0;
margin:0;
}
th.names {
background-color:transparent;
color:black;
text-align:left;
width:240px;
padding:0;
margin:0;
}
td.surname {
font-weight:bold;
width:33%;
}
#alpha td.person {
width:33%;
font-size:medium;
text-align:left;
padding-left: 10px;
}
h3 {
margin-top:0;
padding-top:0;
margin-bottom:0;
}
p.alphalink {
margin-top:0;
padding-top:0;
font-size:medium;
margin-bottom:0;
}
table.test01 {
width:770px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="top">
<div id="top-inner">
<div id="mast">
<a href="http://www.roberson-family.com"><img src="/img/family4.png" width="200" height="50" alt="Roberson Family" title="Roberson Family" /></a><br />GENEALOGY
</div><!-- close mast div -->
<h3>Name List</h3>
<p class="alphalink"><a href="#aa">No Surname</a>, A, <a href="#b">B</a>, <a href="#c">C</a>, <a href="#d">D</a>, E, F, <a href="#g">G</a>, <a href="#h">H</a>, I, <a href="#j">J</a>, <a href="#k">K</a>, <a href="#l">L</a>, <a href="#m">M</a>, N, O, P, Q, <a href="#r">R</a>, <a href="#s">S</a>, <a href="#t">T</a>, U, <a href="#v">V</a>, W, X, Y, Z, </p>
<table class="test01" style="text-align:center;">
<tr>
<td width="*"> </td>
<th class="names"><h2>Name</h2></th>
<th class="names"><h2>Born</h2></th>
<th class="names"><h2>Died</h2></th>
<td width="*"> </td>
</tr>
</table>
</div><!-- close top-inner div -->
</div><!-- close the fixed top div -->
<div id="middle">
<div id="namedisplay">
<div id="alpha">
<table ...
... </table>
</div><!-- close alpha div -->
</div><!-- close namedisplay div -->
</div><!-- close the scrolling middle div -->
<div id="bottom">
<div id="bottom-inner">
<div id="footer">
<p><a href="/genealogy/g_index.php" target="_top">Table of Contents</a> | <a href="/genealogy/surnames.php" target="_top">Surnames</a> | <a href="/genealogy/names_frame.php" target="_top">Name List</a></p>
<p class="xxs">This Website was Created Jul 12, 2008 with <a href="http://www.coffeecup.com/html-editor/" target="_top">HTML Editor 2008</a> from <a href="http://www.coffeecup.com" target="_top">CoffeeCup Software</a></p>
</div><!-- close footer div -->
</div><!-- close bottom-inner div -->
</div><!-- close the fixed bottom div -->
</body>
</html>
The #mast rule is the only rule in the external css file that I changed:
#mast {
text-align:center;
vertical-align:middle;
margin-bottom: 0;
font-size: x-large;
font-weight: bold;
padding-top: 10px;
}
text-align:center;
vertical-align:middle;
margin-bottom: 0;
font-size: x-large;
font-weight: bold;
padding-top: 10px;
}
I'm not sure if any of this will help with the link problem you experienced. All the links seemed to be working for me with exception of a quirk in Firefox where the links become unselectable a little bit before they pass beneath the #top.
EDIT: for testing purposes I changed the root-relative paths to page-relative. I just changed them back.
