Div problemas en Chrome
Publicado por albricia (13 intervenciones) el 24/01/2014 18:37:10
Hola!
Estoy haciendo una web con varios elementos diversos, entre ellos un div, tabla, etc...
Resulta que todo funciona perfecto con IE, Firefox, etc, pero al ver la web en Chrome sale todo desconfigurado.
El código es el siguiente:
¿ Por qué con Chrome no sirve y sale todo el bloque de los div debajo en vez de sobre la imagen de fondo?
Estoy haciendo una web con varios elementos diversos, entre ellos un div, tabla, etc...
Resulta que todo funciona perfecto con IE, Firefox, etc, pero al ver la web en Chrome sale todo desconfigurado.
El código es el siguiente:
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
<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="images/Mann nuevo sintexto.jpg" width="1100px" height="677px" alt="" title="" />
<span>
<div id="contenedortabla">
<table align= "center"><TABLE WIDTH=700 HEIGHT=300><tbody><tr><td width="50%" style=" padding-top: 15px">
</center>
<td width="50%" style=" padding-left: 15px; padding-top: 15px"> <video controls="controls" widht="200" height="200">
<source src="videos/BOOK.mp4" type="video/mp4">
<source src="videos/BOOK.pm4" type="video/webm">
</video>
</td></tr>
</tbody>
</table></center>
</span>
<div id="botones">
<ul style="list-style-type:none; display:inline;">
<li class="opcion"><a href="was.html"><img src="images/tierra.png" width="20px" height="20px" ></a></li>
<li class="opcion"><a href="was2.html"><img src="images/tierra.png" width="20px" height="20px" ></a></li>
<li class="opcion"><a href="was3.html"><img src="images/tierra.png" width="20px" height="20px" ></a></li>
</ul>
</div>
</div>
<div id="boton2">
<a href="Index nuevo.html" > <img src ="images/tierrahome.png" width="80px" height="80px" > </a>
</div>
</div>
</body>
</html>
¿ Por qué con Chrome no sirve y sale todo el bloque de los div debajo en vez de sobre la imagen de fondo?
Valora esta pregunta
0
