jonas: div um table, IE mein Sorgenkind

Hallo,

Ich möchte um eine bzw. mehrere Tabellen ein DIV legen. Für die Ebene lege ich die Abstände links und rechts fest. Alle Tabellen sollen (müssen) sich in ihrer Breite an diese Ebene anpassen. Die Ebene nutze ich für gewisse Layoutsachen und die Tabellen enthalten Daten. Die entspr. Eigenschaften möchte ich via CSS festlegen. Alle Browser checken das, nur der IE (6, W2K) nicht. Es scheint so, als wenn er nicht kappiert wieviel 100% Breite für die Tabelle bedeuten und setzt die Ebene auf 100%. Die Breitenangabe für die Tabelle sollte sich doch auf die errechnete Breite der Ebene beziehen, oder nicht?
Könnte mir jemand bitte weiterhelften.

div {
  margin:auto 10% auto 10%;
  padding:10px;
  background-color:red;
}

div table {
  background-color:green;
  width:100%;
}

...

<div>
<table>
<tr>
<td> 1 2 3 </td>
</tr>
</table>
</div>

jonas

  1. Hallo

    div {
      margin:auto 10% auto 10%;
      padding:10px;
      background-color:red;
    }

    div table {
      background-color:green;
      width:100%;
    }

    Unter Umständen kann der IE nix mit der o.g. Angabe anfangen. Was ist mit:

    div.table { background-color:green; width:100%;}

    oder meinst du

    div,table { background-color:green; width:100%;}

    ?

    Vielleicht hilft es?

    Gruß André

    1. Hallo,

      Also das war so schon richtig von mir geschrieben, halt eine Tabelle in einer Ebenen. Den IE schein ich jetzt "überlistet" zu haben, indem ich einfach eine zweite Ebene einsetze. Somit scheint er die Breite besser bzw. überhaupt richtig berechnen zu können. Also eine Ebene mit einer Ebene, in der eine Tabelle ist. Jedenfalls kann ich mit dem Resultat leben.

      Beispiel:

      div.d1 {
        margin:auto 10% auto 10%;
        padding:5px;
        background-color:red;
      }

      div.d1 div.d2 {
        margin:0;
        width:100%; /*und hier klappt es merkwürdigerweise mit der Berechnung*/
        background-color:wheat;
        padding:1px;
      }

      div.d1 div.d2 table {
        width:100%;
        background-color:blue;
      }

      ...

      <div class="d1">
      <div class="d2">
      <table>
      <tr>
      <td>
      1 2 3
      </td>
      </tr>
      </table>
      </div>
      </div>

      jonas