Grow your CSS skills. Land your dream job.

anythingslider looks terrible in IE8

  • # April 26, 2011 at 4:10 pm

    A site I’m working features anythingslider and displays beautifully in MSIE 9, FF 4, FF 3, Chrome, and Opera. The page renders horribly in MSIE 8 however. Something is causing IE8 to work in compatibility mode, which is also breaking several :hover effects.

    The anythingslider object doesn’t appear to be as wide or tall in IE8 as it is in IE9 and other CSS3 compliant browsers. This appears to be causing the back/next arrows to be chopped, and the text in the lower area of the object isn’t visible.

    I’ve tried using loose and transitional doctypes, neither affect the problem.

    Could someone take a look and see what I might be doing wrong? IE8 wonkiness

    # April 26, 2011 at 4:34 pm

    Hiya

    I see you are using the latest version of AnythingSlider, but you aren’t using the included anythingslide-ie.css file which does not have any negative margins. If you modify your “anythingslider_iesux.css” file and change these two lines, it should start working.

    div.anythingSlider .arrow {
    top: 35%;
    position: absolute;
    display: block;
    }
    div.anythingSlider .arrow a {
    display: block;
    height: 120px;
    margin: 0;
    width: 45px;
    text-align: center;
    outline: 0;
    background: url(http://cdn.css-tricks.com/images/layout2011/arrows-default.png) no-repeat;
    }

    That should fix it! :)

    # April 26, 2011 at 4:46 pm

    Excellent – the slider looks much better now.

    I noticed that IE8 continues to display in compatibility mode. I’ve cleaned up all of the page errors, except for these three:

    http://htmlhelp.com/cgi-bin/validate.cgi?url=https%3A%2F%2Fsoutheastgenetics.org%2Findex2011d.php%3Fdemo%3D1&warnings=yes

    Is there a workaround for this? ( For others reading, if IE8 renders in compatibility mode the :hover psuedoclass won’t work. )

    # April 26, 2011 at 4:49 pm

    Quick update – I fixed the two inline errors by moving the href tags around. The final error (span) persists…

    # April 26, 2011 at 4:51 pm

    Try changing it to a link (snippet below), also add a “return false” to the end… so it doesn’t allow the click that closes the caption from changing pages immediately:

      /* add a close button (x) to the caption */
    .find('div[class*=caption]')
    .css({ position: 'absolute' })
    .prepend('x')
    .find('.close').click(function(){
    var cap = $(this).parent(),
    ani = { bottom : -50 }; // bottom
    if (cap.is('.caption-top')) { ani = { top: -50 }; }
    if (cap.is('.caption-left')) { ani = { left: -150 }; }
    if (cap.is('.caption-right')) { ani = { right: -150 }; }
    cap.animate(ani, 400, function(){ cap.hide(); } );
    return false;
    });
    # April 26, 2011 at 4:59 pm

    I noticed a lingering “bug” with IE8. Captions loading from the top appear just fine. The right-loading caption (lower right corner) is chopped off, and the bottom-loading caption doesn’t appear at all.

    Help? :-)

    # April 26, 2011 at 5:14 pm

    Hi Astembridge!

    I have IE9 running in IE8 mode and everything seems to work fine for me. Maybe the font size is the problem? You could make the caption wider (changing “130px” to “150px”):

    '.caption-right'  : [ 'caption-Right', '150px', '1000', 'easeOutBounce' ],

    It appears that the closing code is already set to 150px… I guess that’s my fault when I wrote the demo, but it shouldn’t make a huge difference since it’s bigger.

    # April 26, 2011 at 5:20 pm

    Here’s a screenshot of IE8 / XP:
    http://www3.picturepush.com/photo/a/5538676/img/5538676.png

    # April 26, 2011 at 5:39 pm

    I did try changing the width from 130 to 150px, but caption-right still appears chopped in half.

    # April 26, 2011 at 5:42 pm

    Hmmm, I don’t know what to tell you… it’s hard for me to troubleshoot that problem when I don’t have IE8 or XP anymore. Is it a problem in IE7? Like I said it works fine for me in IE9 in IE8 mode, so I’m kind of stuck here.

    Honestly, I would just pick one caption direction that works and stick with it. I put all four in there for demonstration purposes.

    # April 26, 2011 at 6:04 pm

    Some images call for a caption on different sides. Your demo works fine, so I don’t know what I am doing that causes my page to render the right caption incorrectly. Hoped there was an easy answer.

    Ideally I would force all IE users to upgrade to MSIE 9, FF or Chrome. ;)

    # April 26, 2011 at 6:04 pm

    I don’t know if this will help you any, but in your source code viewed from IE7 I get this before the Doctype declaration

    You are viewing this page with MSIE 7.0 - some elements (like the anythingslider widget) do not appear correctly...


    < ?xml version="1.0" encoding="iso-8859-1"?>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Anything written before the Doctype will cause Quirks mode. I don’t know where it is generated from however as I cannot see it in the source code viewed from Firefox.

    # April 26, 2011 at 6:31 pm

    Hey Virtual! Yeah that could be the issue! Thanks!… I’ve pulled out enough hair for today ;) LOL

    # April 27, 2011 at 10:23 am

    Virtual rules the pit! Moved my IE8 notice below the body tag and now anythingslider appears perfectly. And the hover psuedoclass is working too.

    Thank you both!!!

    # April 27, 2011 at 12:44 pm

    Yay…..!

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".