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