EasySlider and CSS not playing nicely
I'm just wondering if you can tell me why the slider at www2.chrislrobinson.co.uk doesn't work properly. I've lifted the code from their examples. It seems to work fine when the page first loads, but if you refresh, the image is stretched all across the page and it is very thin (i.e. height and width get screwed up).
Here is the relevant HTML:
<body>
<div id="container">
...
<div id="mainContent">
...
<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
and the paraphrased CSS:
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:696px;
height:241px;
overflow:hidden;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000 url('images/bg.png') no-repeat top center;
margin: 0;
padding: 0;
text-align: center;
color: #FFFFFF;
}
#container {
width: 804px; /* this will create a container 80% of the browser width */
background: transparent;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
/*border: 2px solid rgba(255,255,255,1);*/
}
#mainContent {
background: rgba(60,60,60,0.75) no-repeat top center;
width: 800px;
border: 2px solid rgba(184,0,31,1);
padding: 0px;
min-height: 600px;
-moz-border-radius: 10开发者_运维知识库px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
min-height: 400px;
clear: both;
}
span#prevBtn{}
span#nextBtn{}
Thanks! Chris
EDIT: If you keep refreshing it, it eventually works again for a bit! But that's not really a solution...
EDIT 2: I found out that when it displays weirdly, this is the HTML:
<div id="slider" style="width: 953px; height: 18px; overflow-x: hidden; overflow-y: hidden; ">
Anyone know why this might be changing?I viewed your source and the first thing I would recommend is using a Reset Stylesheet or * {margin:0;padding:0} this will reset all your css properties across all browsers.
Then on #slider, #slider li add.
#slider, #slider li {width:600px;height:200px}
This should help you achieve your goal.
Edit: And if you want to center your slideshow add
{margin:0 auto}
加载中,请稍侯......
精彩评论