Buenos días,
llevo días intentando solucionar un problema que me está dando un slider en IE.
html:
<div class="total_cont">
<div class="cabecera"></div>
<div class="mod_actualidad">
<div class="cabecera_act">Actualidad</div>
<div id="jslidernews2" class="lof-slidecontent" style="width:450px; height:286px;">
<div class="preload"><div></div></div>
<div class="button-previous">Previous</div>
<!-- MAIN CONTENT -->
<div class="main-slider-content" style="width:450px; height:286px;">
<ul class="sliders-wrap-inner">
<li>
<img src="img/rot_1.gif" title="Newsflash 2" />
<div class="slider-description">
<div class="slider-meta"> <i> — Monday, February 15</i></div>
<h4>Content of Newsflash 1</h4>
<p>The one thing about a Web site, it always changes! Joomla! makes...
</p>
</div>
</li>
<li>
<img src="img/rot_2.gif" title="Newsflash 1" >
<div class="slider-description">
<div class="slider-meta"><i> — Monday, February 15</i></div>
<h4>Content of Newsflash 2</h4>
<p>Joomla! makes it easy to launch a Web site of any kind. Whether you want ...
</p>
</div>
</li>
<li>
<img src="img/rot_3.gif" title="Newsflash 3" >
<div class="slider-description">
<div class="slider-meta"><i> — Monday, February 15</i></div>
<h4>Content of Newsflash 3</h4>
<p>With a library of thousands of free Extensions, you can add what you need ...
</p>
</div>
</li>
<li>
<img src="img/rot_4.gif" title="Newsflash 5" >
<div class="slider-description">
<div class="slider-meta"><i> — Monday, February 15</i></div>
<h4>Content of Newsflash 4</h4>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create ...
</p>
</div>
</li>
<li>
<img src="img/rot_5.gif" title="Newsflash 5" >
<div class="slider-description">
<div class="slider-meta"><i> — Monday, February 15</i></div>
<h4>Content of Newsflash 5</h4>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create ...
</p>
</div>
</li>
<li>
<img src="img/rot_6.gif" title="Newsflash 5" >
<div class="slider-description">
<div class="slider-meta"><i> — Monday, February 15</i></div>
<h4>Content of Newsflash 6</h4>
<p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create ...
</p>
</div>
</li>
</ul>
</div>
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="navigator-content">
<div class="navigator-wrapper">
<ul class="navigator-wrap-inner">
<li>
<div>
<img src="img/p_rot_1.gif" />
</div>
<div class="marco"></div>
</li>
<li>
<div>
<img src="img/p_rot_2.gif" />
</div>
<div class="marco"></div>
</li>
<li>
<div>
<img src="img/p_rot_3.gif" />
</div>
<div class="marco"></div>
</li>
<li>
<div>
<img src="img/p_rot_4.gif" />
</div>
<div class="marco"></div>
</li>
<li>
<div>
<img src="img/p_rot_5.gif" />
</div>
<div class="marco"></div>
</li>
<li>
<div>
<img src="img/p_rot_6.gif" />
</div>
<div class="marco"></div>
</li>
</ul>
</div>
</div>
<!----------------- END OF NAVIGATOR --------------------->
<div class="button-next">Next</div>
<!-- BUTTON PLAY-STOP -->
<div class="button-control"><span></span></div>
<!-- END OF BUTTON PLAY-STOP -->
<div class="sub_slider">El portal del mediador de Reale crece</div>
</div>
</div>
</div>
Css:
.total_cont{
width:450px;
font-size:0.75em;
font-family:Arial,helvetica, sans-serif;
text-align:center;
}
/*.total_centrado {
width:1000px;
margin:0 auto;
}*/
/* módulo actualidad */
.mod_actualidad {
width:350px;
float:left;
}
.cabecera_act {
width:450px;
float:left;
color:#ffffff;
font-weight:bold;
text-align:center;
background:url('../img/cab_450.gif') left top no-repeat;
}
/* SLIDER ACTUALIDAD */
/* CSS Document */
/* slider layout */
.lof-slidecontent { position:relative; overflow:hidden; /*border:#F4F4F4 solid 1px;*/}
.lof-slidecontent .preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.lof-slidecontent .preload div{ height:100%; width:100%; background:transparent url(../img/load-indicator.gif) no-repeat scroll 50% 50%;}
.lof-slidecontent .sliders-wrapper{
position:relative;
width:900px;
height:100%;
z-index:3px;
overflow:hidden;
}
.lof-slidecontent ul.sliders-wrap-inner{
overflow:hidden;
list-style:none;
background:transparent url(../img/load-indicator.gif) no-repeat scroll 50% 50%;
padding:0px;
margin:0;
position:absolute;
overflow:hidden;
}
.lof-slidecontent ul.sliders-wrap-inner li{overflow:hidden; padding:0px;margin:0px; float:left; position:relative;}
.lof-slidecontent .lof-opacity li{position:absolute; top:0; left:0; float:inherit; }
.lof-slidecontent .navigator-content {
position:absolute;
right:0;
top:0;
/*z-index:9;*/
height:300px;
width:auto;
overflow:hidden;
/*color:#FFF;*/
}
.lof-slidecontent .navigator-wrapper{
position:relative;
/*z-index:10;*/
height:180px;
width:auto;
overflow:hidden;
color:#FFF;
float:left;
}
.lof-slidecontent ul.navigator-wrap-inner{
top:0;
padding:0;
margin:0;
position:absolute;
width:100%;
}
.lof-slidecontent ul.navigator-wrap-inner li{
cursor:hand;
list-style:none;
padding:0;
margin-left:0px;
overflow:hidden;
float:left;
display:block;
text-align:center;
}
/************************************************** *****/
ul.sliders-wrap-inner li img{
padding:0px;
float:left;
}
.lof-slidecontent .slider-description a.readmore{color:#58B1EA; font-size:95%; }
.lof-slidecontent .slider-description a{ color:#FFF; }
.lof-slidecontent .slider-description{
z-index:100px;
position:absolute;
bottom:12px;
left:0px;
width:236px;
background:url(../img/bg_trans.png);
height:83px;
padding:10px;
color:#FFF;
}
.lof-slidecontent .slider-description h4 { font-size: 14px; margin: 10px 0; padding: 0; }
.lof-slidecontent .slider-description .slider-meta a{
margin:0;
background:#C01F25;
font-size:75%;
padding:2px 3px;
font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
text-transform:uppercase;
text-decoration:none
}
.lof-slidecontent .item-meta a:hover{ text-decoration:underline;}
.lof-slidecontent .item-meta i { font-size:70%; }
/* item navigator */
.lof-slidecontent ul.navigator-wrap-inner li.active{
/*background:url(../img/marco_rojo.gif) no-repeat scroll left center; */
color:#FFF;
}
.lof-slidecontent ul.navigator-wrap-inner li > div{
background:url(../img/transparent_bg.png);
color:#FFF;
height:100%;
position:relative;
margin-left:0px;
padding-left:0px;
border-top:1px solid #E1E1E1;
text-align:left;
}
.lof-slidecontent ul.navigator-wrap-inner li > div.marco{
top:-11162px;
/*border:3px solid #c00000;*/
width:77px;
height:40px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active > div.marco{
top:-62px;
border:3px solid #c00000;
width:77px;
height:55px;
}
.lof-slidecontent ul.navigator-wrap-inner li.active div{
/*background:url(../img/marco_rojo.gif) left top no-repeat;*/
color:#FFF;
}
.lof-slidecontent ul.navigator-wrap-inner li img{
height:61px;
width:81px;
margin:0px;
float:left;
padding:0px;
border:#C5C5C5 solid 1px;
/*border-bottom:0px;*/
}
.lof-slidecontent ul.navigator-wrap-inner li.active img,
.lof-slidecontent ul.navigator-wrap-inner li:hover img {
border:#6C8E5C solid 1px;
/*border:#c00000 solid 2px;*/
}
.lof-slidecontent .button-next,
.lof-slidecontent .button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.lof-slidecontent .button-next {
right:0px;
background:url(../img/next.gif) no-repeat right center;
}
.lof-slidecontent .button-previous {
left:0px;
background:url(../img/previous.gif) no-repeat left center;
}
.lof-slidecontent .button-control {
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
background:url(../img/transparent_bg.png) repeat;
}
.lof-slidecontent .button-control span { display:block; width:100%; height:100%;}
.lof-slidecontent .action-start span {
background:url(../img/play.png) no-repeat center center;
}
.lof-slidecontent .action-stop span {
background:url(../img/pause.png) no-repeat center center;
}
.sub_slider{
width:100%;
margin-top:-6%;
padding:0.3% 0 1% 1%;
text-align:left;
font:bold 1.2em Tahoma, Geneva, sans-serif;
color:#666;
}
