Firefox: Tabellenzelle rutscht nach unten

Jack0815 · 19. März 2006

Hi ihr,

ich habe ein Problem mit meiner Tabelle.

Diese Tabelle besteht grob gesagt aus zwei Spalten, links das Menü, rechts der Content. Die Zelle, in der sich das Menü befindet, soll bis zum unteren Rand gezogen werden.

Im IE funktioniert das auch, nicht allerdings im Firefox. Hier wird die Tabellenzelle an den unteren Seitenrand gesetzt und oberhalb davon befindet sich 'Leere' ... auch die eigentliche Hintergrundfarbe der Tabellenzeile wird nicht angezeigt.

Habe schon alles mögliche probiert, leider ohne Ergebnis. Wenn ich eine feste Höhe (z.B. 600 px) für diese Zelle definiere, dann schiebt der Firefox die Tabelle nach oben. Nützt mir allerdings nichts, weil die Höhe sich dynamisch an den Inhalt der rechten Seite anpassen soll.

Hier mal der Quellcode der Seite:

Code:

<body>
  
<center>

<table BORDER=0 cellspacing="0" cellpadding="0" align="center">

<tr>
    <td width="154"> </td>
    <td background="images/Kopf01.gif" height="26px" width="566"> </td>
</tr>

<tr>
    <td valign="top" rowspan="4"><img src="images/Logo_mouseover.gif" alt="logo"></td>
    <td class="oben" height="60">
        <div style="position: relative; top: 13px; font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold; font-size: 12px; color: #003366; text-align:center">Managemententwicklung & Coaching
        </div>
     </td>
</tr>

<tr>
    <td class="mitte"> </td>
</tr>

<tr>
    <td background="images/Textfeld_mitte.gif" height="90">
           <div style="position: relative; top: -18px; left: 30px; font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold; font-size: 12px; color: #990000; text-align:left">Mit dem Wandel wachsen...</div>
    </td>
</tr>

<tr>
   <td class="tabellenkopf" rowspan="2" width="566">
        <div class="abstand">
	Hier steht der Content .... 
        </div>
   </td>
</tr>


<tr>
    <td valign="top" bgcolor="#666699" height="100%" >	
         <div style="vertical-align:top; position: relative; top: 0px; ">
                <div id="li_block1"> </div>
                <div id="li_block2">
	     <div style="position: absolute; top:0px;left:3px;width:150px;text-align:left; font-size:11px;">
	     <div style="position: absolute; top:0px;left:15px;"><strong><font color="#990000">Home</font></strong></div>
	     <div style= "position: absolute; top:30px;left:15px;"><a href="manage.html">Managementwicklung</font></a></div>
	     <div style= "position: absolute; top:60px;left:15px;"><a href="coaching.html">Coaching</a></div>		 
 	     <div style= "position: absolute; top:90px;left:15px;"><a href="berater.html">Ihr Berater</a></div>
	     <div style= "position: absolute; top:120px;left:15px;"><a href="branchen.html">Branchenerfahrung</a></div>
	    </div> <!-- position relative - Menüpunkte -->
                 </div>
                 <!-- li_block2 -->
	 
                 <div id="li_block3"><!--div style"position: relative;top:0px;"></div-->	 </div> 

                 <div id="li_block4">	   
                        <div style="position: relative; top:-3px;left:3px;width:150px;text-align:left; font-size:11px;">
	  <div style= "position: absolute; top:7px;left:15px;"><a href="coaching.html">Kontakt</a></div>
    	  <div style= "position: absolute; top:37px;left:15px;"><a href="coaching.html">Kooperationspartner</a></div>
	  <div style= "position: absolute; top:67px;left:15px;"><a href="coaching.html">Literatur</a></div>
	  <div style= "position: absolute; top:97px;left:15px;"><a href="coaching.html">Impressum</a></div>
                  </div>
                  </div> 
                  <!-- li_block4 -->
 	 
                  <div id="li_block5">  	 </div>
                  </div> 	 
      </td>
</tr>

<tr>
    <td bgcolor="#336699"> </td>
    <td  background="images/Textfeld_unten.gif" >	
           <div style="position: relative; top: -20px; left: 30px; font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold; font-size: 12px; color: #990000; text-align:left">... unter Berücksichtigung Ihrer Persönlichkeit, Erfahrungen und Ziele.</div>
    </td>
</tr>

</table>

und hier noch die zugehörige CSS-Datei:
(die nicht relevanten angaben habe ich weggelassen)

Code:

body{ 
  height: 100%; 
}

table {
  padding: 0;
  margin: 0;
}

.oben {
  background-image:url(images/Kopf02.gif); 
  background-repeat:no-repeat; 
  width:566px; 
  height:60px; 
  margin-top: 0px; 
}

.tabellenkopf {
  background-image:url(images/Textfeld_mitte.gif); 
}

.abstand {
  margin-left: 30px;
  margin-right: 20px;
  text-align: left;
  position: relative;
  top: -30px;
  line-height: 20px;
}


#li_block1{
  width: 154px;  
  height: 30px;
  position: relative;
  top: -11px;
  left: 0px;
}

#li_block2{
  width: 154px; 
  position: relative;
  top: -11px;	
  left: 0px;
  height: 150px;
}

#li_block3{
  width: 154px;
  height: 22px;
  position: relative; 
  top:-11px;
  left:0px;
}

#li_block4{
  width: 154px;
  height: 111px;
  top:-11px;
}

#li_block5{
  width: 154px;
  height: 22px;
  position: relative;
  top:-11px;
}

Zum besseren Verständnis häng ich unten nochmal zwei Screenshots dazu.. einmal die Seite mit dem IE, einmal mit Firefox.

Ich hoffe, einer von euch hat einen Tipp für mich.. mittlerweile bin ich einfach nur noch ratlos, was dieses Problem angeht...

Viele Grüße
Jacky

Firefox: Tabellenzelle rutscht nach unten

Jack0815

New member

Anhänge