Hallo Jo,
Du positionierst deine Elemente absolut, zum Teil, ohne Werte fuer left und top anzugeben, das bringt den IE aus dem Tritt.
Nebenbei bemerkt, deine Groessenangaben, die ja auch erst durch das Positionieren notwendig werden, lassen auch im Firefox horizontale Scrollbalken enstehen. Ich wuerde an Deiner Stelle so vorgehen:
<body>
<div id="main">
Deine bestehenden Inhalte
</div>
</body>
#main kannst Du, wenn du magst, auf eine feste Groesse bringen und zB. einmitten (= margin:auto). Wenn du auf eine feste Breite gehst, ist 960 px ein guter Wert, dann hast du auch die 1024/768er Aufloesungen im Griff.
#main sollte on CSS also etwa so aussehen
#main {
margin: 20px auto;
width:960px;
position: relative;
}
#head { /* wuerde jezt ganz simpel funktionieren */
background:transparent url(../images/head.jpg) no-repeat scroll 0 0;
height:149px;
/* evtl border-bottom: 20px #ccc solid */
}
Wenn das Bild in #head die volle Viewportbreite haben soll, waere es in diesem Szenario viel besser in body aufgehoben.
#anzeigebalken und #showverzeichnis koennen wohl entfallen
Der brauene Kasten mit der Navi waere so ein Kandidat fuer absolute Positionierung, aber dann ohne margin etc. Die Navigation als solche enthaelt keine tabellarischen Daten, sondern ist eine Liste von Links und sollte entsprechen in <ul><li> stehen
Der eigentliche Inhaltsblock haette einfach entsprechend margin von links und die Adresse wuerde einfach daneben gefloatet.
Wobei, wenn ich jetzt schon am Maekeln bin, die Adresse als Bild ist wirklich keine gute Idee, das ist, als wolltest du Google auf jeden Fall aussen vor halten.
Der Footer wiederum waere bei mir ein <div> ausserhalb von #main, versehen mit der passenden Farbe.
Gruss
Dieter