2012-06-12 12 views
6


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.

First image of my appFailcapas 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&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); 
    } 
} 


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

+0

¿Cómo se muestra el texto que parece incorrecto en la pantalla? ¿Y qué intentas hacer? ¿Podrías aclarar un poco? – Charlie

+0

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 ;-) –

+0

¿Entonces básicamente se superponen? – Charlie

Respuesta

0

¿Estás seguro de que esto no es un problema con tu JS?

Aquí es un violín con su código en él: http://jsfiddle.net/8wsvu/

Es la función show() en pura JS una función de Android, o se supone que es JS? Aún no soy lo suficientemente bueno en JS para saber si es así, pero buscar en Google no arrojó ningún resultado porque es una función JS.

Mi segunda conjetura sobre por qué está mal la estratificación es porque los div están siendo posicionados uno encima del otro.

Si puede usar jQuery para mostrar y ocultar los elementos en la página, esto sería mucho más simple.

+0

He intentado con jquery y div simple, es decir, dentro de un div no otro. Sigue en las terminales con Android 2.1 y versiones posteriores. gracias –

+0

hola, muchachos. ¿Alguien sabe si estoy cambiando el html por html5, este problema está resuelto? gracias –

+0

¿te ayudó mi respuesta? si es así, recíbalo y o acéptalo. – Charlie

Cuestiones relacionadas