Hi,
The reason that things change when you add a border will be due to margin collapse. You could add a padding top instead of a border and then the collapse will stop.
I'll leave the lecture to others but you are going about this the wrong way.
Here are as few pointers though 
You don't need to absolutely place everything and you should let elements just fall into the flow of the page and then just nudge them around with margins. This means it will never overlap even if you add or remove elements.
Don't use empty tables to make borders but apply borders to existing elements instead.
For menus you should lists and not just loads of divs with loads of classes. You can style a whole menu via one class on the parent in most cases.
Don't use breaks to make space or use empty elements. Just use margins on existing elements via classes or context.
Use a strict doctype and then remove all presentations tags from the page such as align= and center tags.
Be consistent and make sure you address the default margins padding of elements properly.
I have given the page a quick tidy up to show what I mean (and I would even remove the first table you are using and use css instead but I was short of time and am late already ).
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Parkfield Kids 2011</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a {
text-decoration: none;
}
a:link {
color: #1111F8;
}
a:visited {
color: #1111F8;
}
a:hover {
color: #FBA626;
}
a img {
border:0
}
h1, h2, h3, h4, h5, h6, p {
margin:0 0 .75em
}
html, body {
margin:0;
padding:0;
height:100%
}
body {
text-align: center;
font-family: arial, helvetica;
font-size:100%;
}
#wrapper {
position: relative;
width: 1209px;
margin: auto;
text-align: center;
background-color: #FFF;
min-height: 100%;
/*border: 1px solid black;*/
padding:1px 0;
}
* html #wrapper {
height: 100%;
}
div.comic p {
font-family: "Comic Sans MS";
font-size: 100%;
}
div.bigcomic h3 {
font-size: 180%;
font-family: "Comic Sans MS";
font-weight: bold;
color: #933;
margin:1em 0;
}
.menu {
border-top:2px solid #933;
border-bottom:2px solid #933;
list-style:none;
padding:10px 0;
font-size:160%;
width:800px;
margin:0 auto 30px;
overflow:hidden;
}
.menu li, .menu a {
display:inline;
margin:0;
}
.menu li {
margin:0 25px
}
.menu a:link, .menu a:visited {
color: #FBA626;
}
.menu a:hover {
color: #1111F8;
}
h2.song {
color:#cc0033;
margin:20px 0;
font-size:200%;
text-align:center;
clear:both;
}
table.header {
width:800px;
margin :auto;
font-family: "Comic Sans MS";
}
.header td {
padding:5px;
vertical-align:bottom
}
.header td.mid {
width:325px;
}
hr {
width:800px;
margin:auto
}
</style>
</head>
<body>
<div id="wrapper">
<h1><img src="http://gerrysbluegrass.com/banner2.jpg" width="749" height="72" alt="Gerry Higbie's Tablature Site"></h1>
<hr>
<table class="header" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://gerrysbluegrass.com/Ger.jpg" width="200" height="257" alt="Gerry"> </td>
<td class="mid"><p><a href="http://www.parkfieldbluegrass.com/kids_programs.html"><img src="http://gerrysbluegrass.com/parkfield_logo.gif" width="245" height="100" alt="parkfield logo" ></a> </p>
<p>Visit the <a href="http://www.parkfieldbluegrass.com/kids_programs.html">Parkfield</a> Site<br>
Check out the <a href="#flyer">Flyer</a> below</p></td>
<td><img src="http://gerrysbluegrass.com/Will.jpg" width="220" height="257" alt="Will"> </td>
</tr>
</table>
<hr>
<h2 class="song">Old Spinning Wheel</h2>
<ul class="menu">
<li><a href="2011/OldSpinningWheel/banjo/banjo.htm">Banjo</a></li>
<li><a href="2011/OldSpinningWheel/guitar/guitar.htm">Guitar</a></li>
<li><a href="2011/OldSpinningWheel/fiddle/fiddle.htm">Fiddle</a></li>
<li><a href="2011/OldSpinningWheel/mandolin/mandolin.htm">Mandolin</a></li>
<li><a href="2011/OldSpinningWheel/bass/bass.htm">Bass</a></li>
<li><a href="2011/OldSpinningWheel/lyrics/lyrics.htm">Lyrics</a></li>
</ul>
<h2 class="song">Worried Man Blues</h2>
<ul class="menu">
<li><a href="2011/WorriedManBlues/banjo/banjo.htm">Banjo</a></li>
<li><a href="2011/WorriedManBlues/guitar/guitar.htm">Guitar</a></li>
<li><a href="2011/WorriedManBlues/fiddle/fiddle.htm">Fiddle</a></li>
<li><a href="2011/WorriedManBlues/mandolin/mandolin.htm">Mandolin</a></li>
<li><a href="2011/WorriedManBlues/bass/bass.htm">Bass</a></li>
<li><a href="2011/WorriedManBlues/lyrics/lyrics.htm">Lyrics</a></li>
</ul>
<h2 class="song">Soldier's Joy</h2>
<ul class="menu">
<li><a href="2011/SoldiersJoy/banjo/banjo.htm">Banjo</a></>
<li><a href="2011/SoldiersJoy/guitar/guitar.htm">Guitar</a></li>
<li><a href="2011/SoldiersJoy/fiddle/fiddle.htm">Fiddle</a></li>
<li><a href="2011/SoldiersJoy/mandolin/mandolin.htm">Mandolin</a></li>
<li><a href="2011/SoldiersJoy/dobro/dobro.htm">Dobro</a></li>
<li><a href="2011/SoldiersJoy/lyrics/lyrics.htm">Lyrics</a></li>
</ul>
<p class="mainpoic"><img src="http://gerrysbluegrass.com/front_2010.jpg" width="1010" height="502" alt="Gerrys bluegrass"></p>
<div class="comic">
<p>Jammin' with the Parkfield kids -- Catch our <a href="http://www.youtube.com/watch?v=9uBA76NMwPQ">YouTube Clip</a> to see the action ...!</p>
</div>
<hr>
<div class="bigcomic">
<h3>Check out the Parkfield Kids Flyer for the latest info<br>
--oo0oo--</h3>
<p id="flyer"><a href="#"><img src="http://gerrysbluegrass.com/2011_Flyer.jpg" width="1209" height="935" alt="Flyer" ></a></p>
</div>
</div>
</body>
</html>
The positioning may differ from your original but that can be tweaked through adjusting the margins in the css.
If I had time I would have also removed the hrs and placed the borders on the original elements or section wrappers. The 2 divs at the bottom aren't really necessdary either but I left them there in case other content was going in that section and it would help to provide structure and a hook for styling.
Hope its of some use.
Help!!! I've got a wrapper DIV (relative) and then another DIV absolute to it and then some other DIVs inside which are absolute to their parent. LINK Everything seemed to be okay until yesterday (I'm in the process of building) when I noticed that the DIVs which are absolute to the wrapper seemed to be randomly floating around (The DIVs inside remained in their correct positions relative to their parent.) I discovered that if I put a border on the wrapper DIV, everything seemed to snap back into place ?? this is all with IE8. Also, the positoning when I view the code locally is different to when I view it through the web server. Chrome seems to be a little better than IE8. Obviously, I am doing something terribly wrong -- Please help Obi Wan Kenobe. You're my only hope!
Reply With Quote
Bookmarks