Search code examples
jqueryinternet-explorerpositioncycle

jQuery Cycle Plugin Position Issue in IE

The issue is occurring under the 'Account Services Team' section on this page.

Internet Explorer 9 seems to be fine, but if you turn on Compatibility View you'll notice that the images fading in and out via the Cycle Plugin are now in middle of the containing div rather than in their proper place on the left.

I have tried positioning the containing div as a floating element, an inline-block element, and now as absolutely positioned, but the same issue keeps occurring regardless.

Here is the code block in question (note that I will remove the unsightly inline styling once I find a proper fix):

    <div id="accountservicereps_sth">
        <div style="position: absolute; left: 10px; top: 14px; width: 150px; height: 150px;">
            <div class="slideshow_accountservicesteam">
                <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam"><img src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/sth_accountservices_brandonschneider_150.jpg" width="150" height="150" alt="" border="0" /></a>
                <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam"><img src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/sth_accountservices_jeffbarnet_150.jpg" width="150" height="150" alt="" border="0" /></a>
                <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam"><img src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/sth_accountservices_donmoffett_150.jpg" width="150" height="150" alt="" border="0" /></a>
                <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam"><img src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/sth_accountservices_joelkretzinger_150.jpg" width="150" height="150" alt="" border="0" /></a>
                <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam"><img src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/sth_accountservices_melissaviceral_150.jpg" width="150" height="150" alt="" border="0" /></a>
                <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam"><img src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/sth_accountservices_daniellehallam_150.jpg" width="150" height="150" alt="" border="0" /></a>
                <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam"><img src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/sth_accountservices_staceybaca_150.jpg" width="150" height="150" alt="" border="0" /></a>
                <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam"><img src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/sth_accountservices_tenleyblock_150.jpg" width="150" height="150" alt="" border="0" /></a>
                <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam"><img src="http://i.cdn.turner.com/nba/nba/.element/media/2.0/teamsites/warriors/images/sth_accountservices_tamarastanten_150.jpg" width="150" height="150" alt="" border="0" /></a>
            </div>
        </div>

        <div style="position: absolute; left: 175px; top: 60px; width: 120px; height: 150px; vertical-align: middle;">
            <a href="http://www.nba.com/warriors/seasonticketholders/accountservicesteam">Meet Your<br />Account Service<br />Representatives!</a>
        </div>
    </div>
Solution

  • Looks like the anchor tags inside of slideshow_accountservicesteam are being positioned absolutely as well. Try adding left:0 to them in the CSS.