Tengo un problema con mi Slider, en todos los navegadores se ve bien, pero en IE se desacomoda.
- Asi se deberia ver
- Y se ve así
El problema creo que esta en las flechas, y en su position:absolute;
Probe sacando los divs de las flechas y no se desacomoda.
Este es el codigo que uso:
Código PHP:
<div id="destacado">
<div id="slider">
<img class="scrollButtons left" src="<?php bloginfo('template_directory'); ?>/imgs/leftarrow.png">
<div style="overflow: hidden;" class="scroll">
<div class="scrollContainer">
<?php $s == 0; ?>
<?php $slider_query = new WP_Query("category_name=destacada&showposts=6"); ?>
<?php while ($slider_query->have_posts()) : $slider_query->the_post(); $s++;
$do_not_duplicate = $post->ID; ?>
<div class="panel" id="panel_<?php echo ($s); ?>">
<div class="inside">
<?php if( get_post_meta( $post->ID, "image_value", true ) ) : ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php bloginfo( 'template_directory' ); ?>/timthumb.php?src=<?php echo get_post_meta( $post->ID, "image_value", true ); ?>&w=289&h=238&zc=1" alt="<?php the_title(); ?>" class="alignleft"/></a>
<?php else : ?>
<img src="<?php bloginfo('template_directory'); ?>/imgs/slider-sample.jpg" alt="Libertad FM 99.7" />
<?php endif; ?>
<div id="slider-content">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title() ?></a></h1>
<div class="date-slider">
<?php $arc_year = get_the_time('Y'); $arc_month = get_the_time('m'); $arc_day = get_the_time('d'); ?>
<a href="<?php echo get_day_link("$arc_year", "$arc_month", "$arc_day"); ?>" title="Ver todas las noticias de este día"><?php the_time('j F Y '); ?></a>
</div>
<?php the_excerpt(); ?>
</div>
</div>
</div>
<?php endwhile; wp_reset_query(); ?>
</div>
</div>
<img class="scrollButtons right" src="<?php bloginfo('template_directory'); ?>/imgs/rightarrow.png">
</div>
</div> Código HTML:
#destacado{
height:260px;
width:648px;
margin:20px 0 20px 20px;
padding:0;
float:left;
}
#slider {
width: 607px;
height:240px;
margin: 0;
padding:10px;
position: relative;
border: 1px solid #ccc;
float:left;
background-color:#FFF;
}
.scrollButtons {
position:absolute;
top: 105px;
cursor: pointer;
}
.scrollButtons.left {
left: -18px;
z-index:100;
}
.scrollButtons.right {
right: -18px;
z-index:100;
}
Espero me puedan ayudar!
Gracias!.
