Problema con Firefox Saludos, estoy haciendo mi web y he insertado el EASYSLIDER1.7 para tener mi contenido deslizante. El asunto es que en IE se ve bién pero en Firefox se ve desbordado, las imagenes abarcan casi todo el espacio del div del contenido y tapan ciertos elementos, he revisado bastante y la cosa se me ha complicado
Aca dejo el codigo:
HTML
<body>
<div id="all">
<div id="cont_cabecera">Esto es la cabecera</div>
<div id="centro">
<div id="cont_lat_der">La barra lateral derecha</div>
<div id="cont_lat_izq">La barra lateral izquierda</div>
<div id="cont_contenido">
<div id="slider">
<ul>
<li><a href="http://www.vinculo Numero1"><img src="../easyslider/easyslider17/01.png" alt="Destacado 1" width="550" height="100" /></a></li>
<li><a href="http://www.vinculo NUmero2"><img src="../easyslider/easyslider17/02.png" alt="Destacado 2" width="550" height="100" /></a></li>
<li><a href="http://www.vinculo NUmero3"><img src="../easyslider/easyslider17/03.png" alt="Destacado 3" width="550" height="100" /></a></li>
<li><a href="http://www.vinculo NUmero4"><img src="../easyslider/easyslider17/04.png" alt="Destacado 4" width="550" height="100" /></a></li>
<li><a href="http://www.vinculo Numero5"><img src="../easyslider/easyslider17/05.png" alt="Destacado 5" width="550" height="100" /></a></li>
</ul>
</div></div>
</div>
<div class="corte"></div>
</div>
<div id="pie_div">Esto es el pie</div>
<div class="corte"><br />
</div>
</div>
</body>
</html>
COdigo CSS:
/*Comienzo del css del sitio */
html { padding: 0;
width: 100%;
height: 100%;
}
body { margin: auto;
padding: 0;
width: 100%;
height: 100%;
}
#all { border: 4px solid #C8EBF4;
margin: 0 auto;
width: 760px;
position: relative;
display: block;
min-height: 608px;
height: auto!important;
}
#cont_cabecera { height: 85px;
text-align: center;
position: relative;
background-color: #999;
}
#cont_lat_izq { width: 100px;
float: left;
position: relative;
height: auto;
min-height: 500px;
margin-left: -100px;
}
#cont_lat_der { width: 100px;
float: right;
position: relative;
min-height: 500px;
height: auto;
margin-right: -100px;
}
#cont_contenido { position: relative;
float: left;
height: auto!important;
min-height: 503px;
height: 500px;
padding: 5px 5px 5px 5px;
}
#pie_div {
width: 100%;
position: absolute;
color: #fff;
bottom: -254px;
text-align: center;
background-color: #111;
height: 20px;
clear: both;
left: 8px;
}
.corte { clear: both;}
#centro { border-left: 100px solid #666;
border-right: 100px solid #666;
height: auto!important;
width: 560px;
min-height: 503px;
position: relative;
height: 506px;
}
/*comienzo del slider */
img{border:none;}
pre{
display:block;
font:5px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:503px;
}
/* // image replacement */
#container{
margin:0 auto;
position:relative;
text-align:left;
width:560px;
height:100px;
background:#fff;
margin-bottom:2em;
}
#content{
position:relative;
}
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:549px;
height:100px;
overflow:hidden;
}
#nextBtn, #slider1next{
left:696px;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:18px;
}
ol#controls li{
margin:0 5px 0 0;
padding:0;
float:left;
list-style:none;
height:18px;
line-height:8px;
}
ol#controls li a{
float:left;
height:18px;
line-height:18px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
/*tamaño botones numericos*/
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
