¿Alguien me puede decir que es lo que genera ese borde gris de unos 10px, abajo del todo de mi web? , he revisado todos los divs y nada, me parece algo muy extraño.
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-repeat:no-repeat;
background-image:url(fondo.png);
-webkit-background-size:100%;
-moz-background-size: 100% 100%;
background-size: 100% 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;
background: rgba(0, 0, 0, 0.0);
}
#button li a:hover {
background-color: rgba(40, 81, 150, 0.2);
color: #6bb3eb;
}
#icons{
text-align:right;
margin:35px 20px;
}
#fb{
float:right;
}
#tw{
margin-left:5px;
float:right;
}
#tm{
margin-left:5px;
float:right;
}
#sc{
margin-left:5px;
float:right;
}
#yt{
margin-left:5px;
float:right;
}
#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:50px;
}
#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.html">INICIO</A></LI>
<LI><A href="noticias.html">NOTICIAS</A></LI>
<LI><A href="trabajos.html">TRABAJOS</A></LI>
<LI><A href="videos.html">VIDEOS</A></LI>
<LI><A href="http://www.antilablog.co.nr/" target="_blank">BLOG</A></LI>
<LI><A href="equipo.html">EQUIPO</A></LI>
<LI><A href="info.html">INFO</A></LI>
<LI><A href="contacto.html">CONTACTO</A></LI>
</UL>
</DIV>
<DIV id="espacio1">
<IMG src="raya.png"/>
<DIV id="icons">
<DIV id="yt">
<A href="http://www.youtube.com/user/AntilaProductions" target="_blank"><IMG src="minilogos/minilogoyoutube.png"/></A>
</DIV>
<DIV id="sc">
<A href="http://soundcloud.com/antilaproductions" target="_blank"><IMG src="minilogos/minilogosoundcloud.png"/></A>
</DIV>
<DIV id="tm">
<A href="http://antilaproductions.tumblr.com/" target="_blank"><IMG src="minilogos/minilogotumblr.png"/></A>
</DIV>
<DIV id="tw">
<A href="https://twitter.com/Antila_P" target="_blank"><IMG src="minilogos/minilogotwitter.png"/></A>
</DIV>
<DIV id="fb">
<A href="http://www.facebook.com/AntilaProductions" target="_blank"><IMG src="minilogos/minilogofacebook.png"/></A>
</DIV>
</DIV>
</DIV>
<DIV id="contenedor">
<DIV class="container">
<div id="featured">
<a href="https://soundcloud.com/ultimatebreath/ultimate-breath-exhumed-body" target="_blank"><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"/>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F2717374&auto_play=false&show_artwork=true&color=09a5ff"></iframe>
</DIV>
<DIV id="hoja">
<IMG src="hoja.png"/><br>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML> Un saludo y gracias.