Abweichende Darstellung IFRAME in mobilen Browsern

[StefanB]

Hallo zusammen,

auf meiner Nistkasten-Webcam-Seite (http://www.stefanbion.de/nistkasten/) habe ich zwei "Textboxen": Einen Newsticker und eine Shoutbox. Diese bestehen jeweils aus einem IFRAME, der in eine TABLE eingebettet ist, die wiederum durch ein DIV positioniert wird:

  
<div class="list" style="position:absolute; left:30px;">  
  <table cellpadding="2" cellspacing="1" border="0" width="140" height="450">  
  <tr class="header">  
    <td align="center"><b>Newsticker</b></td>  
  </tr>  
  <tr>  
    <td height="100%">  
      <iframe src="iframe_inhalt.htm" width="100%" height="100%" scrolling="auto" hspace="0" vspace="0" frameborder="0"></iframe>  
    </td>  
  </tr>  
  </table>  
</div>  

Auf Desktop-Browsern (Opera, Firefox, Internet Explorer, Chrome) sieht das auch so aus wie "designt", also exakte Höhe der beiden Textboxen von 450 Pixeln, unabhängig von der Menge des Inhalts des IFRAMEs.

Wenn man das Ganze aber in einem mobilen Browser unter Android betrachtet, werden die Textboxen "aufgeblasen", d.h. die TABLE wird in der Länge soweit gestreckt, bis der gesamte Inhalt der IFRAME ohne Scrollbalken angezeigt wird.

Hier mal eine aufs Wesentliche reduzierte Testseite: http://www.stefanbion.de/tmp/iframetest.htm

Habt Ihr eine Idee, warum Mobilbrowser die Textboxen so anders darstellen als Desktopbrowser, und wie man es hinbekommen könnte, daß sie auch auf Mobilbrowsern richtig dargestellt werden? - Ich weiß, TABLEs und IFRAMEs sind eh bäh, aber geht das denn auch nur mit CSS?

Gruß,
Stefan

[Klawischnigg]

Hi there,

[...] Diese bestehen jeweils aus einem IFRAME, der in eine TABLE eingebettet ist, die wiederum durch ein DIV positioniert wird:

Das ist wie Zielen über mehrere Spiegel bei geschlossenen Augen. Wenn Du den Iframe selbst absolut positionierst und ihm auch die richtigen Maße gibst, dann muss ihn jeder Browser richtig anzeigen. Also so in etwa:

  
      <iframe src="iframe_inhalt.htm" width="100%" height="100%" style="position:absolute; left:30px;width:140px; height:450px;" scrolling="auto" hspace="0" vspace="0" frameborder="0"></iframe>  

Da kannst Du Dir den ganzen gedivten Tablemist sparen...

[StefanB]

Hi,

Da kannst Du Dir den ganzen gedivten Tablemist sparen...

Leider nicht, denn die Table brauche ich ja zum Strukturieren der übrigen feststehenden Inhalte wie Überschrift oder Eingabefelder+Buttons der Shoutbox, die ja nicht Bestandteil des scrollbaren IFRAME sind.

Außerdem wird auch, wenn ich Dein Beispiel verwende (ohne width="100%" und height="100%" übrigens), in mobilen Browsern das IFRAME vertikal gestreckt (gerade getestet). Das muß also einen anderen Grund haben.

Gruß,
Stefan

[suit]

Leider nicht, denn die Table brauche ich ja zum Strukturieren der übrigen feststehenden Inhalte wie Überschrift oder Eingabefelder+Buttons der Shoutbox, die ja nicht Bestandteil des scrollbaren IFRAME sind.

Wieso positionierst du die nicht auch absolut hin?

Du kannst bei absoluter positionierung werte für oben _und_ unten gleichzeitg angeben - bei Mobilgeräten sind die Browser hinreichend modern, dass das auch unterstützt wird. Nur Scrollbalken sind ein problem in Mobilen Geräten, da hier panning und nicht scrolling genutzt wird. Das ist ein völlig anderes Konzept.