наслоение в HTML внутри веб-просмотра


У меня есть html-ресурсы, которые отображаются благодаря веб-просмотру в Android. С текущими браузерами показывается хорошо, а вот с более старыми браузерами типа Android 2.1 идет то, что вы видите на картинках.

First image of my appFail


Я помещаю код на случай, если кто-то захочет увидеть.
HTML

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Documento sin título</title>
    <script>
        function show(divactual,textactual) {
            if(document.getElementById(divactual).style.display == "block"){
                document.getElementById(divactual).style.display = "none";
                document.getElementById(textactual).innerHTML = "show details...";

                }
            else if(document.getElementById(divactual).style.display == "none"){
                document.getElementById(divactual).style.display = "block";
                document.getElementById(textactual).innerHTML = "hidden details...";
                }
        }
    </script>   
    <style type="text/css">
        body{
            background-color:transparent;
            font-family: Verdana, Geneva, sans-serif;
            font-size: 1.0em;
            font-style: normal;
            color:#999999;
            margin:10px;
        }
        body a{
            color:#0CF;
            text-decoration:none;
        }
        #bg {
            z-index: -14;
            width: 100%;
        }
        #letrapequena {
            font-family: Verdana, Geneva, sans-serif;
            font-size: 0.6em;
            color: #00537c;
        }
        #tituloseccion{
            font-family: Verdana, Geneva, sans-serif;
            font-size: 1.5em;
            font-style: normal;
            font-weight: bold;
            color:#7AB800;
        }
        #headtwo{
            font-family: Verdana, Geneva, sans-serif;
            font-size: 1.2em;
            font-style: normal;
            font-weight: bold;
            color:#7AB800;
        }
        #headthree{
            font-size: 1.1em;
            font-style: normal;
            font-weight:bold;
            color:#00537C;
        }
        #container{
            background-color:#D8F7FE;
            margin:10px 0;
            color:#00537c;
            font-weight:bold;
        }
    </style>
  </head>
  <body style="background-color:transparent;">
    <div id="tituloseccion">
        Titleone
    </div>
    <hr align="left" width="90%" size="0.1em" color="#999999">
    <div id="headtwo">titletwo</div>
    <div id="bigcontainer" style="display:block;">
        <div id="headthree">titlethree</div>
        <div id="generalcont" style="display:block;">
            <div id="container" style="display:block;">
                <div style="display:inline">parrone&nbsp;&nbsp;&nbsp;</div>
                <div style="display:inline;">
                    <a href="javascript:show('info1','text1');" id="text1">show datails...</a>
                </div>
            </div>
            <div  id="info1" style="display:none;" >
                text text text text text text text text 
            </div>
         </div>

        <div id="generalcont" style="display:block;">
            <div id="container" style="display:block;">
                <div style="display:inline">parrtwo&nbsp;&nbsp;&nbsp;&nbsp;</div>
                <div style="display:inline;">
                    <a href="javascript:show('info2','text2');" id="text2">show details...</a>
                </div>
            </div>
            <div  id="info2" style="display:none;" >
                text text text text text text text 
            </div>
        </div>
    </div>
    <div id="letrapequena" style="display:block;">
                text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
            </div>
  </body>
</html>


JAVA

 package es.ibys.prueba.webview;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.webkit.WebView;

public class PruebawebviewActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView myWview = (WebView) findViewById(R.id.webview);

        String miurl = "file:///android_asset/index2.htm";
        myWview.getSettings().setJavaScriptEnabled(true);
        myWview.setBackgroundColor(Color.TRANSPARENT);
        myWview.loadUrl(miurl);
    }
}


Не знаю как исправить. Я пробовал менять слой, css, div, стили... все, что мне приходило в голову. Кто-нибудь случился? Как вам удалось? Помогите пожалуйста

6
задан lûr 12 June 2012 в 13:26
поделиться