HTML - Chrome - problemas con un div

 
Vista:

Chrome - problemas con un div

Publicado por albricia (13 intervenciones) el 27/01/2014 13:19:30
Hola comunidad
Estoy haciendo una web y mientras con Firefox e IE no tengo problemas y sale todo configurado como quiero, no ocurre lo mismo en Chrome.
La web es:
http://cubos.datcom.ch/earthing/was.html
De momento no he publicado los enlaces desde esta web a otras, así que los links Home y el tercer punto no funciona, sólo esta página y el segundo puntito.
En Chrome todo lo que aparece en el div de la imagen aparece abajo del todo. No lo entiendo, no sé qué puedo hacer.

Muchas gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de YopTup

Chrome - problemas con un div

Publicado por YopTup (9 intervenciones) el 27/01/2014 14:41:14
He modificado un poquito tu código, le he insertado unos cuantos cierres (</td> </table>, etc) que tenias pendentes y la parte clave:
1
2
3
4
.background.span {
    position: absolute;
   	left: 0;
}

debias insertarle un punto entre background y span.

y aquí tu codigo modificado:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Earthing-Was ist Earthing</title>
<style type="text/css">
 
 body {
	font-family: Arial;
	background-color: #dfcfa8;
	font-size: 14px;
}
 
 
.background{
 
	position: absolute; /*nos posicionamos en el centro del navegador*/
	top:50%; left:50%; /*determinamos una anchura*/
	width:1100px; /*indicamos que el margen izquierdo, es la mitad de la anchura*/
	margin-left:-550px; /*determinamos una altura*/
	height:677px; /*indicamos que el margen superior, es la mitad de la altura*/
	margin-top:-338px;
 
}
.background.span {
    position: absolute;
   	left: 0;
}
#contenedortabla{
position:absolute;
top:90px ; /*mover esto para alinearlo verticalmente*/
left:100px; /*mover esto para alinearlo a la horizontalmente*/
}
 
 
#boton2 {
	position: absolute;
	top: 10px;
	left: 10px;
}
#botones {
	position: absolute;
	display:inline;
	top: 400px;
	left: 280px;
}
li.opcion{
      display:inline;
}
 
li.opcion:hover{
   border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
 
}
 
p {font-family: Arial; font-size:14px; text-align:justify; }
h1 {font-family: Arial, bold; font-size:18px; color:rgb(0,40,101); text-align: justify; }
 
</style>
 
</head>
 
<body>
<div class="background"> <img src="http://cubos.datcom.ch/earthing/images/Mann nuevo sintexto.jpg" width="1100px" height="677px" alt="" title="" />
<span>
<div id="contenedortabla">
<table align= "center">
<TABLE WIDTH=700 HEIGHT=200><tbody><tr><td width="50%" style="padding-right: 15px; margin-top: 20px; padding-left: 15px; padding-bottom: 15px; width: 20%; padding-top: 15px"><p style="text-align: justify"><h1 align="justify">Natürlich bla bla blaaaaa</h1>
<p>Aqui va a un parrafo</p>
<h1 align="justify">bla bla bla</h1>
<center></center>
<td width="50%" style="padding-right: 15px; margin-top: 20px; padding-left: 15px; padding-bottom: 15px; width: 20%; padding-top: 15px"><p style="text-align: justify">aqui va otro parrafo
<UL type = "disc">
<LI>
  <div align="justify">un punto
  </div>
 </LI>
<LI>
  <div align="justify">otro punto
  </div>
</LI>
<LI>
  <div align="justify">otro punto bla bla
  </div>
</LI>
</UL>
</p>
</td>
</td></tr>
      <tr>
        <td style="padding-right: 15px; margin-top: 20px; padding-left: 15px; padding-bottom: 15px; width: 20%; padding-top: 15px">   </td>
        <td style="padding-right: 15px; margin-top: 0px; padding-left: 15px; padding-bottom: 15px; width: 20%; padding-top: 15px">&nbsp;</td>
      </tr>
  </tbody>
  </table>
  </table>
 <center> </center>
</span>
 <div id="botones">
<ul style="list-style-type:none; display:inline;">
   <li class="opcion"><a href="was.html"><img src="http://cubos.datcom.ch/earthing/images/tierra.png" width="20px" height="20px" ></a></li>
   <li class="opcion"><a href="was2.html"><img src="http://cubos.datcom.ch/earthing/images/tierra.png" width="20px" height="20px" ></a></li>
   <li class="opcion"><a href="was3.html"><img src="http://cubos.datcom.ch/earthing/images/tierra.png" width="20px" height="20px" ></a></li>
</ul>
</div>
  </div>
     <div id="boton2">
  <a href="Index nuevo.html" > <img src ="http://cubos.datcom.ch/earthing/images/tierrahome.png" width="80px" height="80px" > </a>
  </div>
</div>
</body>
</html>

Un saludo

http://www.smugui.com
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar

Chrome - problemas con un div

Publicado por albricia (13 intervenciones) el 27/01/2014 16:17:57
Hola YopTup
eres un genio! funciona correctamente!

Mil gracias!!!!!!

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar