¿Por qué en Google Chrome se me ve el div con el fondo negro?
, aquí os dejo el código:
Código HTML:
<HTML>
<HEAD>
<LINK rel="stylesheet" href="orbit-1.2.3.css">
<LINK rel="stylesheet" href="css/style.css">
<LINK rel="stylesheet" href="demo-style.css">
<SCRIPT type="text/javascript" src="jquery-1.5.1.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="jquery.orbit-1.2.3.min.js"></SCRIPT>
<SCRIPT type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</SCRIPT>
<STYLE type="text/css">
@font-face{
font-family:ostrich-black;
src: url(fuentes/ostrich-black.ttf) format('truetype');
}
body{
margin:0;
padding:0;
background-position:center center;
background-color: black;
background-image:url(fondo.png);
background-repeat: no-repeat;
-webkit-background-size:100%;
-moz-background-size:100%;
height: 100%;
}
#button{
padding:0;
text-align: center;
font-family:ostrich-black;
}
#button li{
font-size: 25px;
background: rgba(0, 0, 0, 0.2);
}
#button li a{
float:left;
padding: 10px;
padding-left:29.85px;
padding-right:29.85px;
color: #FFF;
text-decoration: none;
}
#contenedor{
margin:0 auto;
width:950px;
vertical-align:top;
height-size:100%;
background: rgba(0, 0, 0, 0.2);
}
#espacio1{
margin:0 auto;
width:950px;
height:150px;
background: rgba(0, 0, 0, 0.2);
}
#fecha{
position:absolute;
margin-top:5px;
}
#espacio2{
height:2%;
width:950px;
background: rgba(0, 0, 0, 0.0);
}
#menu{
margin:auto;
width:950px;
text-align:center;
}
#button li a:hover {
background-color: rgba(40, 81, 150, 0.2);
color: #6bb3eb;
}
#icons{
text-align:right;
margin:35px 20px;
}
#fb{
float:right;
-webkit-transition-property:margin-top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
}
#tw{
margin-left:5px;
float:right;
-webkit-transition-property:margin-top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
}
#tm{
margin-left:5px;
float:right;
-webkit-transition-property:margin-top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
}
#sc{
margin-left:5px;
float:right;
-webkit-transition-property:margin-top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
}
#yt{
margin-left:5px;
float:right;
-webkit-transition-property:margin-top;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
}
#fb:hover{
margin-top:-2px;
}
#tw:hover{
margin-top:-2px;
}
#tm:hover{
margin-top:-2px;
}
#sc:hover{
margin-top:-2px;
}
#yt:hover{
margin-top:-2px;
}
#musica{
margin-top:5px;
margin-left:434.5px;
}
#hoja{
margin-left:434.5px;
margin-top:200px;
}
#cosas{
background: rgba(0, 0, 0, 0.0);
width:869px;
margin:0 auto;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="menu">
<UL id="button">
<LI><A href="#">INICIO</A></LI>
<LI><A href="#">NOTICIAS</A></LI>
<LI><A href="#">TRABAJOS</A></LI>
<LI><A href="#">VIDEOS</A></LI>
<LI><A href="#">BLOG</A></LI>
<LI><A href="#">EQUIPO</A></LI>
<LI><A href="#">INFO</A></LI>
<LI><A href="#">CONTACTO</A></LI>
</UL>
</DIV>
<DIV id="espacio1">
<IMG src="raya.png"/>
<DIV id="icons">
<DIV id="yt">
<IMG src="minilogos/minilogoyoutube.png"/>
</DIV>
<DIV id="sc">
<IMG src="minilogos/minilogosoundcloud.png"/>
</DIV>
<DIV id="tm">
<IMG src="minilogos/minilogotumblr.png"/>
</DIV>
<DIV id="tw">
<IMG src="minilogos/minilogotwitter.png"/>
</DIV>
<DIV id="fb">
<IMG src="minilogos/minilogofacebook.png"/>
</DIV>
</DIV>
</DIV>
<DIV id="contenedor">
<DIV class="container">
<div id="featured">
<a href=""><img src="slider.png" /></a>
<a href=""><img src="slider.png" /></a>
</div>
</DIV>
<DIV id="espacio2">
</DIV>
<DIV id="cosas">
<DIV id="fecha">
<IMG src="marca.png"/>
</DIV>
<DIV id="musica">
<IMG src="musica.png"/>
</DIV>
<DIV id="hoja">
<IMG src="hoja.png"/>
</DIV>
</BODY>
</HTML> Gracias y un saludo.