vertical/horizontal centered fluid slideshow - 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;
}

Answer 1

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