Tengo un activo html que se muestra gracias a una vista web en android. Con los navegadores actuales se muestra bien, pero con los navegadores más antiguos como Android 2.1 va lo que ve en las imágenes.
capas dentro de un HTML dentro de una vista web
pongo el código en caso de que alguien quiere ver.
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 </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 </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);
}
}
No sé cómo solucionarlo. He intentado cambiar las capas, css, div, estilos ... todo lo que se me ha ocurrido. ¿Alguien pasó? ¿Cómo te las arreglaste? Por favor ayuda
¿Cómo se muestra el texto que parece incorrecto en la pantalla? ¿Y qué intentas hacer? ¿Podrías aclarar un poco? – Charlie
Hola. Cuando se desarrolle uno de los textos, los que están debajo, permanecerán en la pantalla donde estabas y el texto se desplazará sobre ellos. Este texto se debe mostrar a continuación, el texto no se retrasa. Espero haber explicado ;-) –
¿Entonces básicamente se superponen? – Charlie