Tabelle so breit wie das übergeordnete div (IE-Problem)

[Marc]

Moin moin

mir geht folgendes auf den Senkel:

Ich möchte eine Tabelle so breit haben, wie das umgebende div:

+-----------------------------------------------------------------------+
|+-----------------+---------------------------+-----------------------+|
|| tabelle         |                           |                       ||
||                 |                           |                       ||
|+-----------------+---------------------------+-----------------------+|
|                                                                       |
| div                                                                   |
|                                                                       |
+-----------------------------------------------------------------------+

Leider kann ich die Tabelle nicht durch divs ersetzen (die ist aufgeteilt in zu vielen Scripten, die ich nicht erstellt habe).

Wenn cih die Tabelle 100% breit mache, ist sie so breit wie das Browserfenster. Da sich außerhalb noch andere Dinge befinden, muss man horizontal scrollen, um diese sehen zu können.

Das problem betrifft nur den IE, im Mozilla füllt eine 100% breite Tabelle (wie gewünscht) die gesamte Breite des umgebenden divs aus - nciht mehr und nciht weniger.

Weiß jemand, wie ich den IE in diesem Fall überlisten kann?

Danke Euch allen im Voraus!

Gruß,
Marc.

[Viennamade]

Hallo!

Wie bekommst Du denn die Dinge links und rechts der Tabelle und die Tabelle selbst nebeneinander? Mit float? Dann tippe ich auf den double margin bug des IE http://www.positioniseverything.net/explorer/doubled-margin.html.

display inline sollte dann helfen.

Beste Grüße
Viennamade

[Marc]

Moin moin

Hallo!

Wie bekommst Du denn die Dinge links und rechts der Tabelle und die Tabelle selbst nebeneinander? Mit float? Dann tippe ich auf den double margin bug des IE http://www.positioniseverything.net/explorer/doubled-margin.html.

Da ist nichst daneben (wie auch - die Tabelle füllt ja 100% Breite des divs aus).

display inline sollte dann helfen.

leider nein (habe es probiert).

Trotzdem danke!

Gruß,
Marc.

[Viennamade]

Hallo!

Wie bekommst Du denn die Dinge links und rechts der Tabelle und die Tabelle selbst nebeneinander? Mit float? Dann tippe ich auf den double margin bug des IE http://www.positioniseverything.net/explorer/doubled-margin.html.

Da ist nichst daneben (wie auch - die Tabelle füllt ja 100% Breite des divs aus).

Also was jetzt?

Wenn cih die Tabelle 100% breit mache, ist sie so breit wie das Browserfenster. Da sich außerhalb noch andere Dinge befinden, muss man horizontal scrollen, um diese sehen zu können.

Beste Grüße
Viennamade

[Marc]

Moin moin

Wie bekommst Du denn die Dinge links und rechts der Tabelle und die Tabelle selbst nebeneinander? Mit float? Dann tippe ich auf den double margin bug des IE http://www.positioniseverything.net/explorer/doubled-margin.html.

Da ist nichst daneben (wie auch - die Tabelle füllt ja 100% Breite des divs aus).

Also was jetzt?

Wenn cih die Tabelle 100% breit mache, ist sie so breit wie das Browserfenster. Da sich außerhalb noch andere Dinge befinden, muss man horizontal scrollen, um diese sehen zu können.

Draußen ist eigentlich nur ein Zierrahmen. Das Div, welches die Tabelle enthält, enthält auch alle anderen Inhalte der Seite.

Habe ich tatsächlich falsch geschrieben. SORRY!

Also eigentlich ganz simpel....

Noch ein Bild (wie es sein soll und im Mozilla klappt):

+---------------------------------------+
|  +---------------------------------+  |
|  |+---------+----------+----------+|  |
|  ||tabelle  |          |           |  |
|  |+---------+----------+----------+|  |
|  | div                             |  |
|  +---------------------------------+  |
|    body                               |
+---------------------------------------+

Im IE sieht es so aus (Da die Tabelle so breit wie das Fenster ist, wir der rechte Rand abgeschnitten und ein teil des DIVS, inklusive der Tabelle):

+-----------------------------------
|  +--------------------------------
|  |+---------+----------+----------
|  ||tabelle  |          |
|  |+---------+----------+----------
|  | div  (mit weiteren Inhalten
|  +--------------------------------
|    body
+-----------------------------------

Und drunter der Scrollbalken - nicht gerade das gewünschte Layout...

Gruß,
Marc.

[Viennamade]

Hallo!

Wie bekommst Du denn die Dinge links und rechts der Tabelle und die Tabelle selbst nebeneinander? Mit float? Dann tippe ich auf den double margin bug des IE http://www.positioniseverything.net/explorer/doubled-margin.html.

Da ist nichst daneben (wie auch - die Tabelle füllt ja 100% Breite des divs aus).

Also was jetzt?

Wenn cih die Tabelle 100% breit mache, ist sie so breit wie das Browserfenster. Da sich außerhalb noch andere Dinge befinden, muss man horizontal scrollen, um diese sehen zu können.

Draußen ist eigentlich nur ein Zierrahmen. Das Div, welches die Tabelle enthält, enthält auch alle anderen Inhalte der Seite.

Habe ich tatsächlich falsch geschrieben. SORRY!

Also eigentlich ganz simpel....

Noch ein Bild (wie es sein soll und im Mozilla klappt):

+---------------------------------------+
|  +---------------------------------+  |
|  |+---------+----------+----------+|  |
|  ||tabelle  |          |           |  |
|  |+---------+----------+----------+|  |
|  | div                             |  |
|  +---------------------------------+  |
|    body                               |
+---------------------------------------+

Im IE sieht es so aus (Da die Tabelle so breit wie das Fenster ist, wir der rechte Rand abgeschnitten und ein teil des DIVS, inklusive der Tabelle):

+-----------------------------------
|  +--------------------------------
|  |+---------+----------+----------
|  ||tabelle  |          |
|  |+---------+----------+----------
|  | div  (mit weiteren Inhalten
|  +--------------------------------
|    body
+-----------------------------------

Und drunter der Scrollbalken - nicht gerade das gewünschte Layout...

Mh, Du kannst aber sicher erkennen, was exakt passiert! Sprich wo der IE den Fehler macht. Welche Elemente sind breiter? Oder sind es die 'Abstände' die breiter sind im IE?
Übrigens: Hast Du schon
html,body {
 height: 100%;
}
probiert?

Beste Grüße
Viennamade

[Marc]

Moin moin

Im IE sieht es so aus (Da die Tabelle so breit wie das Fenster ist, wir der rechte Rand abgeschnitten und ein teil des DIVS, inklusive der Tabelle):

+-----------------------------------
|  +--------------------------------
|  |+---------+----------+----------
|  ||tabelle  |          |
|  |+---------+----------+----------
|  | div  (mit weiteren Inhalten
|  +--------------------------------
|    body
+-----------------------------------

Und drunter der Scrollbalken - nicht gerade das gewünschte Layout...

Mh, Du kannst aber sicher erkennen, was exakt passiert! Sprich wo der IE den Fehler macht.

Ja, er macht die Tabelle INNerhalb des divs so breit wie das Browserfenster. Da das div aber durch margin-left und margin-right einen "Rand" erzwingt, beginnt die Tabelle erst nach diesem Abstand, ist dann 100% vom Browserfenster breit ("wächst" also aus dem Fenster nach rechts raus) und wird dann noch vom rechten Rand gefolgt...

Welche Elemente sind breiter? Oder sind es die 'Abstände' die breiter sind im IE?

Die Tabelle innehralb des DIVs ist das Problem - sie ist genauso breit, wie das gesamte Browserfenster...

Übrigens: Hast Du schon
html,body {
height: 100%;
}
probiert?

Das hilft bei Problemen mit der Breite :-)

Aber width:100% habe ich bereits probiert....

Gruß,
Marc.

[Marc]

Moin moin

Die Tabelle innehralb des DIVs ist das Problem - sie ist genauso breit, wie das gesamte Browserfenster...

Ich bin mal wieder selbst drauf gekommen (aber irgendwie klappt es erst während einer Forumsdiskussion): Der DOCTYPE Transitional bewirkt diese falsche Interpretattion. Habe ihn auf Strict gesetzt und nun fluppt es auch im IE!!!

Gruß,
Marc.

[Ingo Turski]

Hi,

Ich bin mal wieder selbst drauf gekommen (aber irgendwie klappt es erst während einer Forumsdiskussion): Der DOCTYPE Transitional bewirkt diese falsche Interpretattion. Habe ihn auf Strict gesetzt und nun fluppt es auch im IE!!!

freu' Dich nicht zu früh - oder sind die die 5.x IEs egal?
Ahilfe könnte sein, dem div _keine_ Breite zuzuweisen, dann nimmt es den zur Verfügung stehenden Raum und nicht mehr ein - unabhängig vom Box-Modell.

freundliche Grüße
Ingo

[Marc]

Moin moin

Ich bin mal wieder selbst drauf gekommen (aber irgendwie klappt es erst während einer Forumsdiskussion): Der DOCTYPE Transitional bewirkt diese falsche Interpretattion. Habe ihn auf Strict gesetzt und nun fluppt es auch im IE!!!

freu' Dich nicht zu früh

Menno!

oder sind die die 5.x IEs egal?

Sollten nicht GERADE mit diesem DOCTYPE tun, was ich will? Der IE6 jedenfalls macht es...

Ahilfe könnte sein, dem div _keine_ Breite zuzuweisen, dann nimmt es den zur Verfügung stehenden Raum und nicht mehr ein - unabhängig vom Box-Modell.

Das gerade ist das Problem.

Diese Tabelle kehrt innerhalb eines Knowledge-Management-Systems immer wieder am Seitenanfang auf. Im Code wimmelt es von Code einer Script-Sprache, die kein Aas kennt und über die cih auch keine Dokus gefunden habe (OScript).

Ich wollte aus der Start-Seite (Login) diese Tabelle schon herausnehmen, da sie hier nciht unbedingt benötigt wird. Dann klappt aber die ganze Seite nicht mehr und ohne Login is schlecht, irgendwie.

Nehme ich aber die Breitenangabe aus der Tabelle, was ich auf der Login-Seite auch noch verschmerzen könnte, ist diese aben auch auf allen Folgeseiten nicht mehr so breit wie die restlichen Inhalte der Seiten (nämlich 100%). Da die Tabelle dort dynamisch mit noch zusätzlichen Inhalten gefüllt wird, die dann 1. "aneinandergeklatscht" und zweitens zum Rest der Seite nicht ausgerichtet werden, sieht das seeehr bescheiden aus.

Ist also auch nicht.

Da es sich hier um eine Seite auf einem internen Testserver handelt, kann ich nicht einmal einen Link posten.

Also werde ich jetzt mal durch das Haus tigern, in der Hoffnunng, jemanden mit einem IE5.x zu finden um herauszufinden, welche Probleme es dort gibt...

Da sitze ich inzwischen eine ganze Woche dran!!! grrr...

Gruß,
Marc.

[Ingo Turski]

Hi,

Sollten nicht GERADE mit diesem DOCTYPE tun, was ich will? Der IE6 jedenfalls macht es...

Der IE6 ist der einzige, der den Box-Modell Bug im standards-compliant mode nicht mehr hat. Wenn die Seite vorher wegen diesem Bug anders als z.B. im Mozilla dargestellt wurde, dann ist dies in jedem Mode in den Vorgängerversionen weiterhin so.

Nehme ich aber die Breitenangabe aus der Tabelle,

das hatte ich auch gar nicht vorgeschlagen, sondern

Ahilfe könnte sein, dem div _keine_ Breite zuzuweisen,

freundliche Grüße
Ingo

[Marc]

Moin moin

Sollten nicht GERADE mit diesem DOCTYPE tun, was ich will? Der IE6 jedenfalls macht es...
Der IE6 ist der einzige, der den Box-Modell Bug im standards-compliant mode nicht mehr hat. Wenn die Seite vorher wegen diesem Bug anders als z.B. im Mozilla dargestellt wurde, dann ist dies in jedem Mode in den Vorgängerversionen weiterhin so.

Hmm... - jetzt verstehe ich, was Du meinst. Mist! Da war ein Denkfehler. Habe da gestern zu lange dran gesessen. Vielleicht geht es heute mit frischem Mut und klarem Kopf besser.

Nehme ich aber die Breitenangabe aus der Tabelle,
das hatte ich auch gar nicht vorgeschlagen, sondern

Ahilfe könnte sein, dem div _keine_ Breite zuzuweisen,

Achso - ja da ist gar keine Breiten-Angabe.

Hier mal das ganze CSS: Es geht um das DIV "layout". Die Tabelle (in einer anderen Datei) ist mit den folgenden Angaben ausgestattet: <table border="0" cellpadding="0" cellspacing="0" width="100%">

body, html {
 margin:0;
 padding:0;
 border:0;
 background-color:#ddf;
}

body {
 font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size:80%;
}

div#layout {
 margin:1em;
 margin-top:1em;
 background-color:#fff;
 border:1px navy solid;
 text-align:center;
}

img#splash {
 float:left;
 width:150px;
}

div#beitrag p {
 margin:auto;
 max-width:40%;
 text-align:center;
}

div#beitrag h1 {
 margin:auto;
 width:70%;
 text-align:center;
}

div#login-area {
 margin:auto;
 margin-top:2em;
 width:36em;
 border:1px solid black;
 background-color:#f00;
}

.login {
 float:left;
 width:16em;
 margin:1px;
 margin-right:1em;
 padding:3px;
 background-color:#eee;
 text-align:left;
}

#Username, #Password, #Domain{
 width:13em;
 margin-bottom:1em;
 font-weight:bold;
 border-width:3px;
 border-style:double;
 border-color:#7FB2CD;
 color:black;
 background-color:#d1e1ee;
}

#Password {
 font-weight:normal;
}

#Username:hover, #Password:hover, div#Domain input:hover {
 background-color:#fff;
}

#Username:focus, #Password:focus, div#Domain input:focus {
 border-color:#f00;
}

div#submit {
 float:left;
 width:33em;
 padding:6px;
}

div#submit input {
 width:15em;
 margin:auto;
 margin-bottom:1em;
 padding:3px;
 padding-right:4px;
 padding-bottom:4px;
 border:solid 0.2em;
 border-color:#bef #59b #59b #bef;
 background-color:#d1e1ee;
}

div#submit input:hover {
 padding:3px;
 padding-left:4px;
 padding-top:4px;
 border-color:#59b #bef #bef #59b;
 text-decoration:none;
}

#help {
 float:right;
 text-align:right;
 width:50%;
}

#officials {
 width:auto;
 padding-bottom:0.5em;
 font-size:0.8em;
 background-color:#ccc;
}

#copy {
 text-align:left;
 width:auto;
 line-height:1em;
}

#admin {
 float:right;
 text-align:right;
 width:50%;
 line-height:1em;
}

.clear {
 clear:both;
}

Im IE 6 geht es jetzt und in im Mozilla...

Vielen Dank für Deine Mühe!!!

Gruß,
Marc.