Warum hat DIV nicht dieselbe Höhe wie TD?

[slomoman]

Ich habe eine Tabelle mit unterschiedlich hohen Zellen, und in einer Zelle liegt ein DIV. Dieses DIV soll die gleiche Höhe haben wir die Zelle. In dem Beispiel unten hat das DIV aber komischerweise nur die Höhe des Texts, der in dem DIV steht...

<table width = "100%">

<tr>

<td valign = "top" >

   <div style = "height:100%;background-color:green;">

   1<br>2<br>3<br>

   </div>

</td>

<td valign = "top">

   1<br>2<br>3<br>

</td>

<td valign = "top">

   1<br>2<br>3<br>1<br>2<br>3

</td>

</tr>

</table>

[moLTe]

ups, falsch verstanden. Ich kucks mir nochmal an.

mfg

moLTe

[moLTe]

Das DIV erkennt die Höhe des Elternelements (td) nicht.

Für den gleichen Effekt kannst du aber auch den STYLE Parameter des DIV's in den td Tag übernehmen und das div ganz raus lassen, wenn du das DIV nicht anderweitig verwenden möchtest.

mfg

moLTe

[slomoman]

Hi molte,

leider habe ich auf das TD Element keinen Zugriff, deshalb muss ich es irgendwie mit dem DIV oder einem anderen Element, dass innerhalb des TDs liegt, machen.....

[etherius]

Das scheint ein IE Problem zu sein. Im Firefox hat das <div> die höhe vom td.

Ich schau mir das mal grad etwas intensiver an.

Arbeitest du mit einem CMS oder wieso kommst du an die Tabelle nicht ran?

[slomoman]

Ja genau, ich verwende so etwas ähnliches wie ein CMS und leider muss es auch im IE laufen.

Gibts villeicht ne andere Möglichkeit, das ganze innere TD mit einer Hintergrundfarbe auszufüllen, ohne auf das TD selbst Einfluss zu nehmen?

[etherius]

Sorry aber ich werd wahrscheinlich heute nicht mehr dazu kommen mich weiter um das Prob zu kümmern. Nur das du bescheid weißt.

[Unique86]

Wenn du dem DIV nen height von 100% gibst ist es klar, da könntest du auch die height angabe ganz weglassen. Versuch mal eine feste größe ! der IE ist sowieso schrott -.- der interpretiert immer alles falsch und ignoriert auch mal gerne eine breiten sowie höhen angabe ...

gruss sven

[geloescht_JesterDay]

Wenn du dem DIV nen height von 100% gibst ist es klar, da könntest du auch die height angabe ganz weglassen. Versuch mal eine feste größe !

Stimmt so nicht. Ein DIV kann eine Höhe von 100% haben, aber nur, wenn es ein Parentelement hat, dass nicht der Body ist. Dann ist seine Höhe nämlich genauso groß (100%) wie die Höhe des Parentelements. Was aber wirklich die komplette Höhe meint, nicht nur die verfügbare Höhe.

<div style="height: 150px; background-color: #ff0000;">

  <div style="height: 100%; background-color: #00ff00;">

    blubb

  </div>

</div>

sollte ein grünes Div anzeigen.

<div style="height: 150px; background-color: #ff0000; padding-top: 1em;">

  <div style="height: 100%; background-color: #00ff00;">

    blubb

  </div>

</div>

Das verschiebt das grüne Div nach unten aus dem roten. Und zwar um 1em.

[slomoman]

Ok, aber das hilft mir auch nicht weiter.

Mein Div hat ein parent-Element, und zwar das TD.

Nur hat das TD keine feste Höhe, sondern die Höhe wird durch den Text definiert, der in der Zelle oder in anderen Zellen der Zeile steht (s. Coding).

Deshalb scheint die Höhenangabe keine Auswirkung zu haben.

Eine feste Höhe möchte ich für das DIV auch nicht vergeben, da die Höhe wie gesagt durch den Text definiert werden soll, den ich auch einer Datenbank lese und von dem ich nicht weiß, wieviele Zeile er in Anspruch nimmt.

Andere Ideen?

Kann ich ein <SPAN> verwenden? Oder eine Tabelle innerhalb der Zelle?

[etherius]

Andere Ideen?

Kann ich ein <SPAN> verwenden? Oder eine Tabelle innerhalb der Zelle?

Klar, Tabellen kann man verschachteln

<table>

 <tr>

  <td>

   <table>

    <tr>

     <td>

      blablubb

     </td>

    </tr>

   </table>

  </tr>

 </td>

</table>

[slomoman]

das man tabellen verschachteln kann, war mir auch klar.

die frage ist, ob man dadurch das o.a. problem lösen kann?

[isardor]

Ich habe eine Tabelle mit unterschiedlich hohen Zellen, und in einer Zelle liegt ein DIV. Dieses DIV soll die gleiche Höhe haben wir die Zelle. In dem Beispiel unten hat das DIV aber komischerweise nur die Höhe des Texts, der in dem DIV steht...

<table width = "100%">

<tr>

<td valign = "top" >

   <div style = "height:100%;background-color:green;">

   1<br>2<br>3<br>

   </div>

</td>

<td valign = "top">

   1<br>2<br>3<br>

</td>

<td valign = "top">

   1<br>2<br>3<br>1<br>2<br>3

</td>

</tr>

</table>

Also wenn du die Erscheinung der Tabelle mal so änderst

<table width = "100%" style="border-collapse:collapse" 

bordercolor="green" border ="1"> [/PHP]

dann sieht es so aus als währe das Div kleiner als die Tabelle, zumindest im IE

[slomoman]

ja, das Div ist kleiner als die Tabelle.

Die Frage ist nur, warum?

Und was kann ich in das TD einbauen, das dieselbe Höhe hat wie das TD?

[isardor]

du kannst die Zelle colorieren.

<table style="border-collapse:collapse" 

 border=1 bordercolor="#000000">

<tr>

<td bgcolor="#00ff00">

    Dein Inhalt

</td>

<td >

    anderer Inhalt

</td>

<td bgcolor="#FF0000">

    Fehler

</td>

</tr>

<tr>

<td >

    Dein Inhalt

</td>

<td >

    anderer Inhalt

</td>

<td bgcolor="#FF0000">

    Fehler

</td>

</tr>

</table>

[/PHP]

Oder du änderst erneut das Verhalten der Tabelle

[PHP]
<table width = "100%" style="border-collapse:collapse"
bordercolor=green border =1 cellspacing=0 cellpadding=0>
<tr>
<td valign = "top" >
<div style = "background-color:red;">
1<br>2<br>3<br>
</div>
</td>
<td valign = "top">
1<br>2<br>3<br>
</td>
<td valign = "top">
1<br>2<br>3<br>1<br>2<br>3
</td>
</tr>
</table>

[slomoman]

hi isador,

das obere beispiel kann ich so nicht umsetzen, weil ich das TD nicht modifizieren kann (s.o.).

das untere beipiel kann ist dasselbe coding wie mein ursprüngliches, außer dass ein border-collapse:collapse eingefügt wurde. dieses löst das problem aber bei mir nicht.

[isardor]

nein, es ist euch ein cellspacing und ein cellpadding drin. die beiden auf null zu setztne ist nicht das selbe wie sie wegzulassen

[slomoman]

Aber auch in dem beispiel mit cellpadding/spacing hat das DIV nicht die gewünschte Höhe :-(

[isardor]

das ist komisch, weil damit nämlich der Abstand von den Tabellenrändern zum Inhalt angegeeben wird. wenn der null ist solle es eine Abstände mehr geben. Bei mir ist das jedenfalls so.