I have the jcarousellite plugin functioning in a webpage (http://www.marketscout.com/various_sites/symposium11/). It scrolls vertically with text and image based content. I have everything looking how I want but the problem is that the scroll in IE8 starts a few pixels up from the zero position [li] tag. So it actually starting in the last [li] and cause the stopping point on each [li] to be slightly askew.

I have bordered each [li] with a red border so you can see the starting point being slightly off. Any help getting this to react like it does in Firefox would be awesome. In firefox, the scroller starts right at the top border of the first [li] and and when it moves to the next [li] stops at the top border. For some reason It looks like IE8 is jacking with the math happening in the jcarousellite .js file. I am a complete JQuery rookie, but I put all the .js files that came in the download into my file structure.

jcarousellite_1.0.1c4.js, jcarousellite_1.0.1.pack.js, & jcarousellite_1.0.1.min.js

I thought accounting for the extra pixel space IE throws in css for margins sometimes would fix the issue. But it has not. The css for the carousel is included below.

#newsticker-demo { width:280px; 

padding:5px 5px 0; font-family:Verdana,Arial,Sans-Serif; font-size:12px; margin:0px auto; border: 0px solid blue; height:295px; }

newsticker-demo a { text-decoration:none; }

newsticker-demo img { border: 0px solid #FFFFFF; }

newsticker-demo .title {

text-align:center; font-size:13px; font-weight:bold; padding-bottom:10px; padding-bottom:8px\9; } .newsticker-jcarousellite { width:270px; } .newsticker-jcarousellite li.njl { list-style:none; display:block; padding-bottom:3px; margin: 0px; margin-bottom: -2px\9; border: 1px solid red; height:62px; height:64px; } .newsticker-jcarousellite .thumbnail { float:left; width:60px; height: 60px; border: 0px solid #FFFFFF; } .newsticker-jcarousellite .info { float:right; width:200px; height: 60px; border: 0px solid #FFFFFF; } .newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; } .clear { clear: both; }

Here is the javascript:

    $(function() {
    $(".newsticker-jcarousellite").jCarouselLite({
        vertical: true,
        hoverPause:true,
        visible: 4,
        start: 0,
        auto:1500,
        speed:2000
    });
});

Here is the HTML:

<div id="newsticker-demo">    
    <div class="title">2011 Symposium Speakers</div>
    <div class="newsticker-jcarousellite">
        <ul>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/RossBuchmuellersm.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#RossBuchmueller">Ross Buchmueller</a>
                <br/>President and CEO<br/>PURE Risk Management</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#RobByler">Rob Byler</a>
                <br/>President<br/>QBE</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#PeterEastwood">Peter Eastwood</a>
                <br/>CEO<br/>Lexington Insurance</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/RickGulliversm.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#RichardGulliver">Richard Gulliver</a>
                <br/>President<br/>HUB International</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/AlanKaufmansm.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#AlanKaufman">Alan Kaufman</a>
                <br/>Chairman, President, & CEO<br/>Burns & Wilcox</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#RichardKerr">Richard Kerr</a>
                <br/>Founder and CEO<br/>MarketScout</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#MichaelHLee">Michael H. Lee</a>
                <br/>Chairman, President and CEO<br/>Tower Group Companies</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#JayPoorman">Jay Poorman</a>
                <br/>Managing Director<br/>StoneRidge Advisors, LLC</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#SusanRivera">Susan Rivera</a>
                <br/>CEO<br/>V3</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <开发者_运维知识库div class="thumbnail">
                <img class="nji" src="images/speakers/Speaker60.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#DougTeegan">Doug Teegan</a>
                <br/>Managing Director<br/>Lloyd's America, Inc.</span>
            </div>
            <div class="clear"></div>
        </li>

        <li class="njl">
            <div class="thumbnail">
                <img class="nji" src="images/speakers/HankWatkinssm.png" alt="" />
            </div>
            <div class="info">
                <span class="cat"><a href="speakers.asp#HankWatkins">Hank Watkins</a>
                <br/>President<br/>Lloyds America, Inc.</span>
            </div>
            <div class="clear"></div>
        </li>

        </ul>
    </div>
</div>  

Thanks in advance for any help!

Find the code in CSS provided:

.newsticker-jcarousellite ul li{
    list-style:none;
    display:block;
    padding-bottom:1px;
    margin-bottom:5px;
    height:180px;  /*added code for setting height */
}

also set in scripting function:

<script type="text/javascript">
$(function() {
    $(".newsticker-jcarousellite").jCarouselLite({
        vertical: true,
        hoverPause:true,
        visible: 2,
        auto:100,
        speed:1000,
        height:180  /*added code for setting height */
    });
});
</script>

You just need to set the height factor on this part of CSS.