Yako: Mitwachsender Tabellen Hintergrund funktioniert nicht im IE

Hallo liebe Community,

ich habe ein Tabellenlayout folgend (links der gestrichelte Bereich ist der Problembereich und wird von einer Haupttabelle umschlossen):

----x-----------x
|   |           |
|   |           |
|   |           |
|   |           |
|   |           |
----x-----------x

In dem linken Bereich habe ich eine Grafik aus 3 Teilen, fixe Größe beim Header, fixe Größe Footer, aber der mittlere Bereich soll flexibel sein und mit dem jeweiligen Conentinhalt aus dem rechten Bereich mitwachsen, in Mozilla tut er das, aber im Internet Explorer nicht.

Folgender Code für die Tabelle, in der sich die 3 HG Grafiken befinden:

HTML-Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">  
        <tr>  
          <td valign="top" class="banner-top">&nbsp;</td>  
        </tr>  
        <tr height="100%">  
          <td valign="top" class="banner-middle"></td>  
        </tr>  
        <tr>  
          <td valign="bottom" class="banner-bottom"></td>  
        </tr>  
      </table>  

Die CSS dazu:

.blockLeft {  
	width: 180px;  
	height: 100%;  
	background-color: #FFFFFF;  
}  
  
.banner-top, .banner-middle, .banner-bottom {  
	width: 175px;  
}  
  
.banner-top {  
	height: 629px;  
	background: url(../../images/banner-top.png) no-repeat top left;  
}  
  
.banner-middle {  
    height: 100%;  
	background: url(../../images/banner-middle.png) repeat-y top left;  
}  
  
.banner-bottom {  
	height: 27px;  
	background: url(../../images/banner-bottom.png) no-repeat top left;  
}

Könnte mir bitte jemand behilflich sein, wo genau der Fehler ist, komme leider nicht weiter, habe schon vieles ausprobiert?

Danke, Liebe Grüße
Yako

  1. Om nah hoo pez nyeetz, Yako!

    Tabellenlayout ist out. Deshalb lautet mein Rat: Verwende eine semantisch sinnvolle Struktur. blog/HTML5-Serie, wiki/HTML-Tutorial

    Wenn sich dabei Probleme auftun, wird dir hier sicher gern geholfen. Beim Reparieren von Tabellenlayouts ist die Bereitschaft geringer.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wachs und Wachstube.

    1. Hey Matthias,

      ich weiß :( Es handelt sich um ein Design, was ich kurzfristig nutzen wollte, soll auch nicht auf Dauer sein. Wenn ich das ganze jetzt umcode und versuche anzupassen, dauert das viel zu lange und is sehr viel Arbeit, da in dem Content Bereich auch noch so einiges ist. Mir wäre schon sehr geholfen, wenn einfach die linke Spalte mit dem Hintergrund mitwächst.

      Om nah hoo pez nyeetz, Yako!

      Tabellenlayout ist out. Deshalb lautet mein Rat: Verwende eine semantisch sinnvolle Struktur. blog/HTML5-Serie, wiki/HTML-Tutorial

      Wenn sich dabei Probleme auftun, wird dir hier sicher gern geholfen. Beim Reparieren von Tabellenlayouts ist die Bereitschaft geringer.

      Matthias

  2. Hier wäre der komplette Tabellencode.

    Wenn der Content Bereich ab "Lorem ipsum" wächst, soll der linke block bzw. die mittlere Grafik mitwachsen ...

      
      
      
    <table id="main-container" border="0" cellpadding="0" cellspacing="0">  
      <tr>  
        <td class="blockLeft" valign="top">  
      
          <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">  
            <tr>  
              <td valign="top" class="banner-top">&nbsp;</td>  
            </tr>  
            <tr height="100%">  
              <td valign="top" class="banner-middle"></td>  
            </tr>  
            <tr>  
              <td valign="bottom" class="banner-bottom"></td>  
            </tr>  
          </table>  
      
        <td class="CenterBox" valign="top"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>  
          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>  
          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>  
          <p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>  
          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. </p>  
          <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. </p>  
          <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. </p>  
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>  
          <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>  
        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></td>  
      </tr>  
    </table>