# Eine Tabellenzelle macht, was sie will. Wächst und schrumpft in der Höhe.



## Tim C. (29. Juni 2004)

Ich musste hier ein kleines Layout entwerfen und habe mich für eine Tabelle entschieden mit einer Höhe und Breite von 100%.
Das Layout ist denkbar einfach. Links eine Zelle die mit colspan=2 über zwei Zeilen geht und rechts oben ein großer Hauptbereich und darunter ein Erklärungsbereich.
In den beiden rechten Bereichen sind Iframes enthalten, da ich nicht auf Scriptsprachen zum Füllen der Bereiche zurückgreifen kann.
Jetzt ändert die untere Zelle aber, je nachdem wieviel ich vom Menü aufklappe, die Höhe und zwar irgendwie völlig unabhängig vom Inhalt des Beschreibungsfensters.

Das Problem tritt nur im IE auf, aber ein _table-layout:fixed_ im <table> Tag, hat auch nichts gebracht 

```
<html>
<head>
<title> Titel </title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="JavaScript">
function perform(welche) {
	if (document.getElementById(welche).style.display == "block") {
		document.getElementById(welche).style.display = "none";
	}
	else {
		document.getElementById(welche).style.display = "block";
	}
}
</script>
</head>

<body style="margin:0px;">
<table border="0" cellspacing="1" cellpadding="0" style="width:100%; height:100%; background-color:#000000;">
<tr>
	<td rowspan="2" id="navicell">
	<!-- ### BEGINN DER NAVIGATION ### -->
		<div id="header">&nbsp;</div>
		
		<div id="navicontainer">
			<a href="index.html">Start</a><br />
			<a href="javascript:void(perform('kat1'))">Kategorie 1</a><br />
				<div name="kat1" id="kat1" class="navicat">
					<a href="content/punkt1.html" target="main" class="navicatlink">Punkt 1</a><br />
					<a href="content/punkt2.html" target="main" class="navicatlink">Punkt 2</a><br />
					<a href="content/punkt3.html" target="main" class="navicatlink">Punkt 3</a>
				</div>

			<a href="javascript:void(perform('kat2'))">Kategorie 2</a><br />
				<div name="kat2" id="kat2" class="navicat">
					<a href="content/punkt1.html" target="main" class="navicatlink">Punkt 1</a><br />
					<a href="content/punkt2.html" target="main" class="navicatlink">Punkt 2</a><br />
					<a href="content/punkt3.html" target="main" class="navicatlink">Punkt 3</a>
				</div>

			<a href="javascript:void(perform('kat3'))">Kategorie 3</a><br />
		</div>
	<!-- ### ENDER DER NAVIGATION ### -->
	</td>
	<td height="90%">
	<!-- ### BEGINN DES HAUPTFENSTERS ### -->
		<iframe src="welcome.html" name="main" frameborder="0" border="0"></iframe>
	<!-- ### ENDE DES HAUPTFENSTERS ### -->
	</td>
</tr>
<tr>
	<td height="10%">
	<!-- ### BEGINN DES ERLÄUTERUNGSFENSTERS ### -->
		<iframe src="content/blank.html" name="description" frameborder="0" border="0"></iframe>
	<!-- ### ENDE DES ERLÄUTERUNGSFENSTERS ### -->
	</td>
</tr>
</table>
</body>
</html>
```
Ich bin wirklich ein wenig ratlos und wäre euch sehr verbunden, wenn ihr mich mal eben in die richtige Richtung schubsen könntet.


----------



## BugsBastard (29. Juni 2004)

Hi,

wie wäre es, wenn Du der unteren Zelle eine feste Höhe zuordnest. Wahrscheinlich wird die prozentuale Größe beim Aufklappen des Menüs verändert. Wieso dann allerdings nur die untere Zelle betroffen ist weiß ich nicht. Allerdings kann es sein, daß der IE die Zellen zwar korrekt verbindet, das Menü aber der oberen Zelle zuordnet. Ist mir auch schon ein paar mal passiert bei prozentualen Angaben. Vielleicht würde Dir auch ein unsichtbares Bild mit der Höhe von 100% und Breite von 1 px. in der vorderen Zelle helfen, da dieses Bild ja über die beiden Zellen wandern würde und die Ausrichtung daher relativiert. 

Zu guter letzt wäre es noch denkbar, daß die untere Tabellenzelle normalerweise mehr % als 10 an Höhe braucht, weil der IFrame zu hoch ist. Zumindests sieht das bei meiner Auflösung (1200*800) so aus.

Gruss,

Bugs


----------



## Tim C. (29. Juni 2004)

Ursprünglich hatte die untere Zelle eine feste Höhe von 150px. Das Verhaltet trat dort genauso auf.
Wie soll ich denn bitte links ein adequates 100% hohes Bild einfügen, dass nicht in Konflikt steht, mit meinem Menü?


----------



## BugsBastard (29. Juni 2004)

Wir wäre es mit einer 2. Tabelle? Bild in die erste Tabellenzelle, Navigation in die 2., Cellpadding+cellspacing auf 0 setzen und klappt (hoffentlich)  

Klappt das Menü eigentlich bei Dir? Weil er mir immer Fehler schmeisst...


----------



## Tim C. (29. Juni 2004)

Ja, das Menü geht bei mir einwandfrei. Sowohl im Firefox, als auch im IE 6.0. Natürlich nur bei den ersten zwei Menüpunkten.


----------



## BugsBastard (29. Juni 2004)

Jetzt gehts auch bei mir, javascript musste zusammengeschrieben werden, war bei mir auseinander weil ich Deinen Quelltext nur rauskopiert hatte.

Ach ja, wenn Du eine extra-Tabelle einsetzt dann kannst Du wahrscheinlich auch ohne ein Bild arbeiten wenn Du die Tabellengröße auf 100% setzt und align=top bei der Tabellenzelle eingibst


----------



## Tim C. (29. Juni 2004)

Das ganze bring leider rein gar nichts. Die Navigation ist ja in einem DIV. Das habe ich mal zur besseren Sichtbarkeit mit einem Rahmen versehen und die Höhe auf 100% gesetzt. Die Navigation füllt immer die volle Höhe aus und trotzdem springt der untere Bereich.


----------



## BugsBastard (29. Juni 2004)

Hattest Du einen Rahmen um die Tabellenzelle gelegt? Die ist schon auf 100% das ist normal, trotzdem versucht der InternetExplorer den Wert in die obere Tabellenzelle zu schreiben (quasi grundlos).

Sorry viel mehr fällt mir dazu nich mehr ein. Das komische ist, daß Dein Script was Du ins Netz gestellt hast bei mir einwandfrei läuft und nichts verändert. Wie gesagt, das einzige was ich Dir noch "anbieten" kann ist, daß Du feste Tabellengrößen nimmst.

Gruss,

Bugs


----------



## Sven Mintel (29. Juni 2004)

Wenn du rechts nur eine Zelle nimmst, und dort eine weitere 100%-Tabelle mit 2 Zellen für die iFrames hineintust, sollten die Änderungen in der linken Zelle keine Auswirkungen mehr haben(schätze ich).

Ca so:

```
<table style="height:100%;width:100%">
 <tr>
  <td>
   Navigation
  </td>
  <td>
   <table style="height:100%;width:100%">
    <tr>
     <td height="90%">
      iFrame-Oben
     </td>
    </tr>
    <tr>
     <td height="10%">
     iFrame-Unten
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
```


----------



## Tim C. (29. Juni 2004)

> _Original geschrieben von fatalus _
> *Wenn du rechts nur eine Zelle nimmst, und dort eine weitere 100%-Tabelle mit 2 Zellen für die iFrames hineintust, sollten die Änderungen in der linken Zelle keine Auswirkungen mehr haben(schätze ich).
> *


Ich probier es morgen - mein letzter Ziviarbeitstag - aus und gebe dann Bescheid. Danke, für den Anstoß.


----------



## Tim C. (30. Juni 2004)

Das ganze scheint den Haken zu haben, dass der Mozilla respektive Firefox kein height="100%" für eine Tabelle akzeptiert. Genau das wäre ja aber im rechten Bereich nötig. 
Ideen?


----------



## BugsBastard (30. Juni 2004)

Nimmt er für Tabellenzellen 100%? Dann könntest Du rechts (in Deine innere Tabelle die die IFrames beinhaltet) eine Tabellenzelle mit 100% und rowspan="2" einrichten. Da sich in dieser Tabelle kein Veränderlicher Inhalt befindet, dürfte sich Dein Frameset nicht verändern. 

Kann es auch sein, daß der Fehler einfach nur gecacht wird? Weil er wie gesagt bei mir einfach nicht auftreten will (weder im Mozilla, noch im Netscape, noch im IE). Bei mir ist die Höhe der rechten unteren Zelle immer gleich, einzig das Menü ist links in der Mitte und wandert (was sich sicher mit tr valign="top" beheben lässt) je nachdem was ausgeklappt ist. Beim IE hatte ich schon oft das Problem, das er alte Fehler trotz leeren des Speichers und aktualisieren der Page falsch angezeigt hat (und ich habe Stunden lang nach dem Fehler gesucht).

Auch auf die Gefahr hin, daß Du das weißt: Du musst unter Extras -> Internetoptionen -> Einstellungen (bei Temporäre Internetdateien) -> Neuere Versionen der Seite suchen: Bei jedem Zugriff auf die Seite auswählen. Dann sollte er jedes mal die neueste Version finden.

Gruss,

Bugs


----------



## Tim C. (30. Juni 2004)

Mmm nee daran liegts glaub ich nicht. Im IE ist jetzt auch alles ok, so wie von fatalus vorgeschlagen. Aber der Mozilla macht die Tabelle rechts dann einfach nicht so hoch wie die ganze Zelle ist, in der sie steckt.


----------



## BugsBastard (30. Juni 2004)

Dann hau doch jetzt ein Bild mit 100% Größe in eine Zelle in der neuen Tabelle. Dann müsste es klappen, oder nich?


----------



## Tim C. (30. Juni 2004)

Wenn ich einem Bild in der Tabelle die Höhe 100% gebe, heisst das lediglich, dass es die gesamten 100% des darüberliegenden Elements nutzt. Das ist in dem Falle die Tabelle, die ja leider nicht  hoch genug ist.


----------



## Isac (30. Juni 2004)

Eine andere Lösung könnte ein spacer sein. Das Bild sollte ungefähr deine Höhe, die du dir vorstellst haben und deine Hintergrundfarbe besitzen. Als breite reicht aj ein Pixel (oder transparent als .gif) Das in die Tabelle einfügen und die Tabelle kann wenigstens nicht kleiner als gewünscht werden ;D



Isac


----------



## BugsBastard (30. Juni 2004)

Wie hattest Du es denn vorher geschafft, daß der Firefox die Tabellenhöhe auf 100% setzt (mit deiner äußeren Tabelle)? Oder ging das noch nie?


----------



## Tim C. (30. Juni 2004)

> _Original geschrieben von BugsBastard _
> *Wie hattest Du es denn vorher geschafft, daß der Firefox die Tabellenhöhe auf 100% setzt (mit deiner äußeren Tabelle)? Oder ging das noch nie? *


Indem ich einfach

```
<table>
  <tr>
    <td rowspan="2">navi</td>
    <td>main</td>
  </tr>
  <tr>
    <td>erklärung</td>
  </tr>
</table>
```
Genutzt habe, wobei dann ja die Höhe des Bereiches Erklärung gesprungen ist.


----------



## BugsBastard (30. Juni 2004)

Da ist die Höhe aber auch beim Firefox gesprungen, oder?

Also entweder gibst du dem ganzen eine Höhe (über ein bild oder direkt über die Tabelle) die höher ist als Dein menü, oder Du musst damit leben. Oder Du musst eine Version für den IE und eine für den Firefox schreiben (wobei der IE normalerweise ja wichtiger ist da er von den meisten Usern benutzt wird) und im Vorfeld mit Javascript abfragen welcher Browser verwendet wird.


----------



## Tim C. (30. Juni 2004)

Nein, ist nur im IE gesprungen. Gibt ja auf Grund des Layouts auch keinen Grund für das Springen. Du rowspan=2 müsste eine Änderung der Contentlänge im Navigationsbereich keinerlei Einfluss haben. Im Firefox ist das ja auch Gott sei Dank so. 
Naja, man kann nicht alles haben, aber verwunderlich finde ich das Trotzdem, weil ich eigentlich davon überzeugt war, sowas schonmal gemach zu haben.


----------

