Zeddix: Tabellen werden ungewollt größer

Beitrag lesen

Hi liebe Selfhtml Community,

Ich hab mal wieder ein Problem, bei mir wird eine Tabelle ungewollt größer, der Code:

<html>
<head>
<title>Amon R&ucirc;dh</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
<!--

var Willkommen = "<table class="main"><tr><td valign="top"><h1>Willkommen in Amon R&ucirc;dh<h1><p><i>Willkommen in Amon R&ucirc;dh,</i> begrüßt dich ein Zwerg.....</p></td></tr></table>"
var Allgemein = "<table class="main"><tr><td valign="top"><h1>News</h1><h2>Hier findest du alles was in Amon R&ucirc;dh vor sich geht</h2><p>text</p></td></tr></table>"
var Forum = "<iframe height="100%" width="100%" src="http://www.forumbutler.de/cgi-bin/yabbserver/foren/F_1391/YaBB.cgi" scrolling="yes"></iframe>"
var Karte = ""
var Diplomatie = ""
var Infrasturktur = "<table cellpadding="2" rules="all" style="border: 2px solid #aaaaaa; text-align:center; width:35%; background-color: #FFEE00;"><tr>.....Das wäre zulang, wollt ich nicht mitposten.....</tr></table>"

function fWillkommen () {
document.all.main.innerHTML = Willkommen;
}

function fAllgemein () {
document.all.main.innerHTML = Allgemein;
}

function fForum () {
document.all.main.innerHTML = Forum;
}

function fKarte () {
document.all.main.innerHTML = Karte;
}

function fDiplomatie () {
document.all.main.innerHTML = Diplomatie;
}

function fInfrasturktur () {
document.all.main.innerHTML = Infrasturktur;
}

//-->
</script>
</head>
<body class="main" onload="javascript:fNews()">
 <table width="100%" height="100%" cellspacing="0" cellpadding="0">
  <tr>
   <td colspan="2" height="100"><p>upper</p>
   </td>
  </tr>
  <tr>
   <td id="nav_head" valign="top">
   </td>
   <td height="*" valign="top" rowspan="8">
    <div id="main" width="100%" height="100%">
    </div>
   </td>
  </tr>
  <tr>
   <td id="nav" valign="top"><h2 class="nav">Navigation</h2><br>
    <p onclick="javascript:fWillkommen()" class="nav">Startseite</p>
    <p onclick="javascript:fAllgemein()" class="nav">Allgemein</p>
    <p onclick="javascript:fForum()" class="nav">Forum</p>
    <p onclick="javascript:fKarte()" class="nav">Karte</p>
    <p onclick="javascript:fDiplomatie()" class="nav">Diplomatie</p>
    <p onclick="javascript:fInfrasturktur()" class="nav">Infrasturktur</p>
   </td>
  </tr>
  <tr>
   <td id="nav_foot"></td>
  </tr>
  <tr>
   <td height="*" name ="puffer">
   </td>
  </tr>
 </table>
</body>
</html>

Und der CSS code(nur das wichtige):

/* ------------------------------------------------------------ */
/* Tabellen       */
/* ------------------------------------------------------------ */

table.main {
   background-image: url(Bilder\holz2.gif);
   width: 100%;
   height:100%;
   border: 2pt inset #B68900;
}

/* ------------------------------------------------------------ */
/* ID-Elemente       */
/* ------------------------------------------------------------ */

#nav_head {
  width: 143px;
  height: 153px;
  background-image: url(Bilder\nav_head3.jpg);
  background-repeat: no-repeat;
}

#nav {
  width: 143px;
  height: 400;
  background-image: url(Bilder\nav3.jpg);
  background-repeat: repeat-y;
  padding-left: 35px;
}

#nav_foot {
  width: 143px;
  height:153px;
  background-image: url(Bilder\nav_foot3.jpg);
  background-repeat: no-repeat;
}

Das ganze ist halt ein "Frameset" mit einer Tabelle und innerhtml, wenn ich das dann ausführe sieht das so aus:
http://img140.imageshack.us/img140/1056/96996350ho6.jpg

Sobald aber der Inhalt des "main" Fensters größer wird verzieht sich die Tabelle ungewollt....
http://img140.imageshack.us/img140/2808/k2ds3.jpg

Danke für die Hilfe

P.s.: Das ist nur ein Rohbau!