The falling apart due to IE not following the standards that most other browsers use. (you can find many forums/sites via google devoted to this)

I have found its easier, overall, to design a site to look good in firefox, then place "fixes" so it appears ok in IE ,   then to do the design in IE and attempt to fix for other browsers.

Ok so I tried adjustint everything to display correctly in Firefox.  Then I researched online and found the double margin bug in ie and tried the solution of using the display: inline property to no avail.  I may be implementing it wrong.  Do you have any other thoughts on how it could be done.  Here is the css for the navigation bar and the conten that is below it.

I have also outlined them with a border if it helps in anyway. 

#navigation (bordered in blue)
{
 position: relative;
 top: -42%;
 margin-left: auto;
 margin-right: auto;
 float: left;
 list-style: none;
 display: inline;
}

#content (bordered in red)
{
 position: relative;
 left: 33.3%;
 top: -103.8%;
 width:66.6%;
 height: 100%;
 border-left: thin solid #CCCCCC;
}

#position (bordered in pink)
{
 background-color: #FFFFFF;
 margin-left: auto;
 margin-right: auto;
 margin-top: 3px;
 width: 750px;
 height: 600px;
}

thank you again for all of your time.  It is much appreicated.

i tried removing the spaces but no go.  I will try again tomorrow to find out how to get to work in all browsers.  Thanks again for you help.

Thanks for sharing!