Tabelle im iframe: Tabellenbreite und iFramehoehe

[Nicola Straub]

Hallo Ihr Lieben!

Ich habe mir heute an einem stoerrischen iframe die Zaehne ausgebissen, hab ihn aber zum groessten Teil bezwungen und
dabei viel gelernt:
http://www.shopanbieter.de/hitliste.php

Der iframe enthaelt keine ganze Seite, sondern nur einen einzelnen
Textabsatz sowie eine Tabelle. Die meisten Formatierungsprobleme habe ich mittels einem eigenen Stylesheet geloest, das ich im iFrame-'Text'
einbinde, denn ich habe es nicht geschafft, dass die iFrame-Inhalte auf ein Stylesheet hoeren, das in die Host-Seite eingebunden ist. Nun
lege ich im Stylesheet der Hostseite nur die iFrame-Styles fest:

.hitliste {
 padding: 0px 10px 0px 10px;
 font-size: 12px;
 width: 550px;
 height: 1400px;
 border: 2px solid red;
 overflow: visible;
 }

Die restlichen Styles liegen im Stylesheet des iFrames.
http://www.shopanbieter.de/includes/style/hitliste.css und Textabsatz und die Tabelle gehorchen soweit auch ganz gut.

Nun die uebrig gebliebenen Probleme/Fragen an Euch:

1. ich weiss nicht warum, aber die Tabelle im iFrame ist nicht breiter zu bekommen, als sie ist. Weder mit absoluten Breiten, noch mit width: 100%; Wie zwinge ich sie in die volle Breite?

2. ich haette gern, dass der iFrame in seiner Hoehe mit dem Inhalt anwaechst. Was ich mit overflow: visible; versucht haben - geht aber nicht. Height: auto sorgt nur dafuer, dass der iFrame sehr kurz wird (etwa 5 Tabellenzeilen hoch).
   Da die Liste ja aber je nach Browserdarstellung oder Listeninhalt laenger oder kuerzer ausfallen kann, ist die Einstellung einer festen iFramehoehe nicht sehr elegant. Gibt es hier eine Loesung?

Herzliche Gruesse
Nicola

[tecboy]

hi,

Der iframe enthaelt keine ganze Seite, sondern nur einen einzelnen
Textabsatz sowie eine Tabelle.

Warum benötigst Du dann einen iframe dafür?

2. ich haette gern, dass der iFrame in seiner Hoehe mit dem Inhalt anwaechst.

Das geht nicht.

Da die Liste ja aber je nach Browserdarstellung oder Listeninhalt laenger oder kuerzer ausfallen kann, ist die Einstellung einer festen iFramehoehe nicht sehr elegant. Gibt es hier eine Loesung?

Ja, einen div-Bereich zu definieren, dessen Höhe mit dem Inhalt wächst.

mfg

tecboy

[Nicola]

Hi!

Warum benötigst Du dann einen iframe dafür?

Weil der Inhalt von einem fremden Server kommt - und daher
(meinem Verstaendnis nach - nicht includiert werden kann ;-(

2. ich haette gern, dass der iFrame in seiner Hoehe mit dem Inhalt anwaechst.
   Das geht nicht.

Mist. Warum eigentlich nicht?

Da die Liste ja aber je nach Browserdarstellung oder Listeninhalt laenger oder kuerzer ausfallen kann, ist die Einstellung einer festen iFramehoehe nicht sehr elegant. Gibt es hier eine Loesung?

Ja, einen div-Bereich zu definieren, dessen Höhe mit dem Inhalt wächst.

Aehm, verstehe ich so verkuerzt nicht. Ein DIV um den iFrame rum?
Woher 'weiss' das DIV dann, wie hoch der iFrame-Inahlt ist?
Oder ein DIV *im* iFrame? Mit hoehe auto und dann passt sich
der iFrame dem DIV an? Oder wie jetzt?

Herzliche Gruesse
Nicola

PS: Noch ne Idee, warum die Tabelle nicht breiter wird?

[Thomas Schenkeli]

Hi!

Warum benötigst Du dann einen iframe dafür?

Weil der Inhalt von einem fremden Server kommt - und daher (meinem Verstaendnis nach - nicht includiert werden kann ;-(

2. ich haette gern, dass der iFrame in seiner Hoehe mit dem Inhalt anwaechst. Das geht nicht.

Mist. Warum eigentlich nicht?

Ich würde aus dem iFrame-heraus per javascript auf das darüber-liegende Dopkument zugreifen und so die Höher verändern. Dann musst du allerdings genau wissen wie hoch du das iFrame denn haben willst ...

[Der Martin]

Hallo Nicola,

http://www.shopanbieter.de/hitliste.php
Der iframe enthaelt keine ganze Seite, sondern nur einen einzelnen Textabsatz sowie eine Tabelle.

das ist schon mal *ein* Problem. Denn ein iframe ist ein eigenständiges Dokument und muss als solches ein *vollständiges* HTML-Grundgerüst mit DOCTYPE, head und body enthalten.

Die meisten Formatierungsprobleme habe ich mittels einem eigenen Stylesheet geloest, das ich im iFrame-'Text' einbinde, denn ich habe es nicht geschafft, dass die iFrame-Inhalte auf ein Stylesheet hoeren, das in die Host-Seite eingebunden ist.

Natürlich. Das sind getrennte Dokumente, die nichts voneinander "wissen".

Nun lege ich im Stylesheet der Hostseite nur die iFrame-Styles fest:
.hitliste {
padding: 0px 10px 0px 10px;
font-size: 12px;
width: 550px;
height: 1400px;
border: 2px solid red;
overflow: visible;
}

Die Angabe zu font-size wird nicht berücksichtigt, weil das iframe-Element keinen Textinhalt hat. Das ist etwas abstrakt und vielleicht schwer zu durchschauen - aber der Inhalt des des iframe-Elements ist, wie schon angedeutet, ein komplettes Dokument, das wieder sein eigenes Stylesheet mitbringt. Nur die Angaben, die die Einbettung des iframes als Block ins Hauptdokument betreffen, sind hier wirksam.

Die restlichen Styles liegen im Stylesheet des iFrames.

Das ist korrekt - abgesehen davon, dass dein iframe-Dokument kein korrektes HTML-Dokument ist.

Nun die uebrig gebliebenen Probleme/Fragen an Euch:

1. ich weiss nicht warum, aber die Tabelle im iFrame ist nicht breiter zu bekommen, als sie ist. Weder mit absoluten Breiten, noch mit width: 100%; Wie zwinge ich sie in die volle Breite?

Das Problem dürfte sein, dass das Dokument im iframe kein body-Element hat, an dem sich der Inhalt orientieren könnte.

2. ich haette gern, dass der iFrame in seiner Hoehe mit dem Inhalt anwaechst.

Das geht nicht - es widerspricht dem Grundkonzept von HTML, dass sich der Inhalt eines Dokuments an die äußeren Gegebenheiten (Fenstergröße) anpasst und nicht umgekehrt. Du hast hier *wieder* das Problem, dass der iframe-Inhalt und das Hauptdokument nichts voneinander wissen. Das body-Element im iframe (das der Browser wohl implizit ergänzt), passt sich wohl seinem Inhalt an und kann dadurch größer werden als der Platz, den das Hauptdokument dem iframe zur Verfügung steht. Dann tauchen im iframe zusätzliche Scrollbalken auf. Aber das Hauptdokument kann die Größe des iframe nicht an dessen Inhalt anpassen.

Da die Liste ja aber je nach Browserdarstellung oder Listeninhalt laenger oder kuerzer ausfallen kann, ist die Einstellung einer festen iFramehoehe nicht sehr elegant. Gibt es hier eine Loesung?

Mir fällt keine ein, außer auf das iframe-Konzept zu verzichten. Dir steht doch offensichtlich PHP zur Verfügung. Warum fügst du die Inhalte nicht gleich serverseitig ein? Dann hättest du aus der Sicht des Browsers nur ein einziges Dokument, in dem sich alle Elemente aufeinander abstimmen können.

Schönen Abend noch,
 Martin