I'm a seasoned web developer (almost 10 years) who specialises in CSS (or so I thought) so this should be a simple one but it's had me baffled for two days now so here I am.
I built a simple jQuery slider with multiple images in a list. The images slide on a timer or when controlled by the user. For some reason the images are extending out of the box to the right before they come into view in IE. Here's the simplified HTML and CSS. If you want to see the script or the page please send me a PM.
<div id="slideSection">
<div id="slideWrap">
<ul id="slides">
<li id="slideImage1"><a href="#"><img src="#"></a></li>
<li id="slideImage2"><a href="#"><img src="#"></a></li>
</ul>
<div id="slideSelector">
...
</div><!-- slideSelector -->
</div><!-- slideWrap -->
<div class="vcard">
...
</div><!-- vcard -->
</div><!-- slideSection -->
#slideSection {
width: 1053px;
height: 339px;
}
#slideWrap {
float: left;
display: inline;
width: 782px;
height: 305px;
overflow: hidden;
}
#slides {
position: relative;
width: 9999px;
height: 270px;
}
#slides li {
float: left;
display: inline;
width: 782px;
height: 270px;
}
#slides li a {
float: left;
display: inline;
width: 782px;
height: 270px;
}
#slideSection .vcard {
float: right;
display: inline;
width: 240px;
height: 300px;
}
If I can help to fix this soon I will be eternally grateful. Thanks in advance.
