Error en el layout sólo cuando es vista en Android

[Evair_Peterson]

¡Hola!


Estoy desarollando el layout de una pagina con una pequeña forma. Le tengo todo el HTML y CSS listo. Probé en IE, Chrome, Mozilla, Safari y Opera y todo salió muy bien. No sé por cual motivo cuando la veo por un movil cualquier con Android, la DIV "texto" no me ocupa todo el espacio que deberia (se queda todo a la izquierda de la DIV "conteudo"). Ya probé meterle un width:700px. Lo hice también con width:100%. Pero ninguna de essas opciones me funcionaron.

Aqui les dejo un enlace de la pagina para que echen un vistazo:

www.evairpeterson.com.br/TESTE/index.php



¿Alguién sabria cual es el problema que me causa eso?
Desde pronto agradezco a cualquiera que me pueda ayudar.

Saludos desde Brasil,
Evair Peterson.

[pzin]

A la izquierda del div #conteudo se queda todo en cualquier navegador, porque está centrado con márgenes automáticos.

Igual si puedes poner una captura de pantalla para quienes no tengamos Android, sería de ayuda.

Intenta ponerle un color de fondo a ese elemento, así ves realmente si ocupa o no el espacio que mencionas.

[Evair_Peterson]

¡Hola Pzin!


Aqui esta un enlace con algunos imagenes para que se pueda aclarar lo que se esta pasando:

www.evairpeterson.com.br/TESTE/IMG/Exemplo.php


Cualquier duda, aqui estoy.
Gracias por su atencion.

[pzin]

Intenta usar [img][/img] y [code][/code] cuando publiques imágenes o código, así no tenemos que salir del foro —somos gente de casa.

Pues si que es un problema extraño.

Intenta hacer una cosa. Los div que estén dentro de conteudo, quítales el ancho. No hace falta que tengan ninguna definido ya que por defecto ocupan el 100%.

Después a las banderas, elimina el margen izquierdo, y añádele:

Código CSS:

margin: 0 auto;
 

Así ese contenido queda centrado, sin necesidad de hacer cosas raras.

No sé si solucionará el problema, pero suele ocurrir que al hacer cosas un tanto extrañas los resultados pueden variar entre unos navegadores y otros.

[Evair_Peterson]

¡Vale! Usare de los signos internos para publicar los codigos y imagenes...

Hice os cambios que me sugeriste y de verdad tienes toda la razón, habían algunas cosas toda estropeadas y que se puedrian mejorar y ahora esta mejor, más comprensible el codigo. Gracias.

Pero... Lo del texto estar desplazado a la izquierda, sigue igual. Te digo que jamás he visto algo asi. Ya vi mucho de verse una cosa en todos los navegadores y el Internet Explorer ser el unico a verlo de modo distinto. Pero con esta pagina, hasta el IE se lo vio satisfactoriamente y el Android no... No imagino que puede ser...

[pzin]

Prueba a ponerle un borde o un color de fondo al elemento #texto a ver si ocupa todo el ancho.

Código CSS:

div#texto {
  border: 5px solid red;
  background: rgba(255,0,0,.5);
}
 

Prueba también, sólo para ver qué pasa, a quitar el text-align.

Es un caso extraño. Yo la verdad es que no tengo mucha costumbre de trabajar con Android y no sé qué clase de problemas suele dar.

[Evair_Peterson]

Lo siento por el retraso, pero estoy sorprendido por las cosas extrañas que veo. Hice lo que me dijiste. He añadido un color de fondo y un borde en el DIV "texto" ...

Cuando accedí al navegador por defecto en el teléfono, tenia el color de fondo y el contorno, como se esperaba. Sin embargo, el texto también se distribuyó por todo el espacio que debería ...

Pensé que todo resultó bien con las modificaciones anteriores y quizá yo sólo tenía que limpiar la memoria del teléfono. Así que volví a la configuración de CSS anteiror, limpié la caché y volví a prueba. Y el texto volvió desplazarse sólo en el lado izquierdo.

Para no tener dudas, también he probado en otro navegador Opera que tengo en el teléfono. Y aunque parece el contorno y el color de fondo, el texto todavía sigue desplazado en el lado izquierdo de la pantalla.

No puedo comprenderlo... ¿Por qué con un color de fondo y el esquema del texto es en su lugar y cuando no hay texto contorno y la frontera está en el lugar equivocado. Nunca lo había visto! Propiedades que en teoría no debería interferir con la posición del texto en cuestión ...

[Evair_Peterson]

Me olvide de decir... Tambien probé quitar el text-align, pero tampoco tuvo el resultado que se busca. Jejeje

[pzin]

Pues si que es raro si.

¿No tienes ningún JavaScript ejecutándose ni nada por el estilo no?

Si te funciona con el color de fondo, puedes ponerle un color de fondo con un canal de opacidad para que no aparezca fondo alguno. No se me ocurre otra cosa.

Código CSS:

background: rgba(0,0,0,0);
 

[Evair_Peterson]

Bueno... Llegué a un resultado algo más satisfactorio con eso:

Código:

#texto {
	text-align: justify;
	font-size: 20px;
	color: #303030;
	padding:25px;
	background: rgba(250,250,250,.5);	
}

Con eso obtuve la solucion del problema para el navegador standard pero sigo con el mismo problema en el navegador Opera Mobile. A ver si obtengo buenos resultados. Si los obtengo, vuelvo aqui compartirselos con todos.

Le soy muy grato por su ayuda PZIN. Gracias por todo.
Saludos desde Brasil, EVAIR.