vertical/horizontal centered fluid slideshow

Question

I try to make a vertical/horizontal centered fluid slideshow, but it seems so, that the slideshow is not vertically centered in Internet Explorer 7 and there are some issues with Internet Explorer 9 and 10. Maybe someone can help me to improve my code. There are also some pixel differences in the top and bottom margin of the vertical center.

Thanks

Working example: http://goo.gl/DesJo

Used: ResponsiveSlides

PS: Is there a way to preload all images?

HTML:

<div id="content">
  <article class="layer">
    <div class="wrap">
      <ul class="rslides">
        <li><img src="01.jpg" alt=""></li>
        <li><img src="02.jpg" alt=""></li>
        <li><img src="03.jpg" alt=""></li>
        <li><img src="04.jpg" alt=""></li>
        <li><img src="05.jpg" alt=""></li>
        <li><img src="06.jpg" alt=""></li>
        <li><img src="07.jpg" alt=""></li>
        <li><img src="08.jpg" alt=""></li>
        <li><img src="09.jpg" alt=""></li>
      </ul>
    </div>
  </article>
  <article class="layer"></article>
</div>

JavaScript:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/resize.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
  $(function() {
    $(".rslides").responsiveSlides({
        fx: 'fade',
        speed: 0,
        timeout: 3000,
        random: true
      });
  });
</script>

resize.js

/*window.onresize = function(){
  $('article.layer img').css({
    maxHeight: $('article.layer').height() * 0.8,
    maxWidth: $('article.layer').width() * 0.8
  });
};*/

$(window).resize(function(){
  $('article.layer img').css({
    maxHeight: $('article.layer').height() * 0.8,
    maxWidth: $('article.layer').width() * 0.8
  });
});

CSS (wihtout CSSreset and menu)

body {
    font-family: 'theantiquab_w5_plainregular';
    color: #000;
}
a {
    text-decoration: none;
    color: #000;
}
a:hover {
    color: #e84a36;
}
@font-face {
    font-family: 'theantiquab_w5_plainregular';
    src: url('theantiqua-webfont.eot');
    src: url('theantiqua-webfont.eot?#iefix') format('embedded-opentype'),  url('theantiqua-webfont.woff') format('woff'),  url('theantiqua-webfont.ttf') format('truetype'),  url('theantiqua-webfont.svg#theantiquab_w5_plainregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
article, aside, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
html, body, #content {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
article.layer {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
}
div.wrap {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
article.layer img {
    max-width: 80%;
    max-height: 80%;
}
/* http://responsive-slides.viljamis.com */

.rslides {
    display: inline-block;
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}
.rslides li {
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}
.rslides li:first-child {
    position: relative;
    float: left;
}
.rslides img {
    height: auto;
    border: 0;
}

score 0 · Answer 1 · edited May 23 '17 at 10:24

The problem here is that IE 7 does not support css display:table-cell so you shoud add a table in order to center the content.

<!--[if gt IE 7]><!--><div id="content">
  <article class="layer">
    <div class="wrap"><!--<![endif]-->
      <!--[if lte IE 7]><table class="layer" style="margin:0 auto;height:100%;"><tr><td class="wrap" style="vertical-align:middle;"><![endif]-->
      <ul class="rslides">
        <li><img src="01.jpg" alt=""></li>
        <li><img src="02.jpg" alt=""></li>
        <li><img src="03.jpg" alt=""></li>
        <li><img src="04.jpg" alt=""></li>
        <li><img src="05.jpg" alt=""></li>
        <li><img src="06.jpg" alt=""></li>
        <li><img src="07.jpg" alt=""></li>
        <li><img src="08.jpg" alt=""></li>
        <li><img src="09.jpg" alt=""></li>
      </ul>
    <!--[if gt IE 7]><!-->
    </div>
  </article>
  <!--<![endif]-->
 <!--[if lte IE 7]></td></tr></table><![endif]-->

To preload all image you should use javascript here there is an answer: Preloading images with jQuery

Thanks. The jQuery preload works very nice, but it seems that the IE7 hack is not working. Do you know a different/better way to vertical/horizontal center that fluid slideshow? — user1939490, Jan 08 '13 at 13:42
IE 7 and below do not support display table* so you should create a table element for them BUT this is not the proper use of html table — Loris, Jan 08 '13 at 13:46
You're right! I think its better not to use trick/hacks. I will ignore IE7. — user1939490, Jan 09 '13 at 17:31

vertical/horizontal centered fluid slideshow

1 Answers1