Grow your CSS skills. Land your dream job.

jquery not working correctly on ie 7 and 8

  • # October 14, 2009 at 2:59 pm

    Hoping you guys can help me on this one, I have products on my site which I’m using prettyPhoto a lightbox clone and it works fine in FF, Safari and Opera. For some reason when you look at it in ie 7 or 8 it does not bring up the lightbox window for the products or sizes at all…..

    http://www.barksandbones.com/dev2/bnbfood.php

    Thanks,
    Tim

    # October 14, 2009 at 3:51 pm

    Tell me about it…. IE is a I pain in thy Arsch…

    but , man, I just check your site and where do you implement the lightbox?? I can’t make in work in Safari neither from FF.

    See’a

    # October 14, 2009 at 3:53 pm

    Crap sorry man its been a crazy day… here is the correct link

    http://www.barksandbones.com/dev2/bnb-timberwolf.php

    Thanks

    # October 14, 2009 at 6:07 pm

    just use the orignal css in prettyPhoto.css

    Code:
    /* ————————————————————————
    This you can edit.
    ————————————————————————- */

    div.light_rounded .pp_top .pp_left { background: url(../images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */
    div.light_rounded .pp_top .pp_middle { background: #fff; } /* Top pattern/color */
    div.light_rounded .pp_top .pp_right { background: url(../images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */

    div.light_rounded .pp_content { background-color: #fff; } /* Content background */
    div.light_rounded .pp_next:hover { background: url(../images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */
    div.light_rounded .pp_previous:hover { background: url(../images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */
    div.light_rounded .pp_expand { background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */
    div.light_rounded .pp_expand:hover { background: url(../images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */
    div.light_rounded .pp_contract { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */
    div.light_rounded .pp_contract:hover { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */
    div.light_rounded .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */

    div.light_rounded .pp_arrow_previous { background: url(../images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */
    div.light_rounded .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; }
    div.light_rounded .pp_arrow_next { background: url(../images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */
    div.light_rounded .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; }

    div.light_rounded .pp_bottom .pp_left { background: url(../images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */
    div.light_rounded .pp_bottom .pp_middle { background: #fff; } /* Bottom pattern/color */
    div.light_rounded .pp_bottom .pp_right { background: url(../images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */

    div.light_rounded .pp_loaderIcon { background: url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat; } /* Loader icon */

    /* ———————————-
    Dark Rounded Theme
    ———————————– */

    div.dark_rounded .pp_top .pp_left { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat; } /* Top left corner */
    div.dark_rounded .pp_top .pp_middle { background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Top pattern/color */
    div.dark_rounded .pp_top .pp_right { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat; } /* Top right corner */

    div.dark_rounded .pp_content { background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Content background */
    div.dark_rounded .pp_next:hover { background: url(../images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */
    div.dark_rounded .pp_previous:hover { background: url(../images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */
    div.dark_rounded .pp_expand { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */
    div.dark_rounded .pp_expand:hover { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */
    div.dark_rounded .pp_contract { background: url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */
    div.dark_rounded .pp_contract:hover { background: url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */
    div.dark_rounded .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */
    div.dark_rounded .currentTextHolder { color: #c4c4c4; }
    div.dark_rounded .pp_description { color: #fff; }

    div.dark_rounded .pp_arrow_previous { background: url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */
    div.dark_rounded .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; }
    div.dark_rounded .pp_arrow_next { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */
    div.dark_rounded .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; }

    div.dark_rounded .pp_bottom .pp_left { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat; } /* Bottom left corner */
    div.dark_rounded .pp_bottom .pp_middle { background: url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat; } /* Bottom pattern/color */
    div.dark_rounded .pp_bottom .pp_right { background: url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat; } /* Bottom right corner */

    div.dark_rounded .pp_loaderIcon { background: url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat; } /* Loader icon */

    /* ———————————-
    Dark Square Theme
    ———————————– */

    div.dark_square .pp_left ,
    div.dark_square .pp_middle,
    div.dark_square .pp_right,
    div.dark_square .pp_content { background: url(../images/prettyPhoto/dark_square/contentPattern.png) top left repeat; }
    div.dark_square .currentTextHolder { color: #c4c4c4; }
    div.dark_square .pp_description { color: #fff; }
    div.dark_square .pp_loaderIcon { background: url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat; } /* Loader icon */

    div.dark_square .pp_expand { background: url(../images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */
    div.dark_square .pp_expand:hover { background: url(../images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */
    div.dark_square .pp_contract { background: url(../images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */
    div.dark_square .pp_contract:hover { background: url(../images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */
    div.dark_square .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */

    div.dark_square .pp_arrow_previous { background: url(../images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */
    div.dark_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; }
    div.dark_square .pp_arrow_next { background: url(../images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */
    div.dark_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; }

    div.dark_square .pp_next:hover { background: url(../images/prettyPhoto/dark_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */
    div.dark_square .pp_previous:hover { background: url(../images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */

    /* ———————————-
    Light Square Theme
    ———————————– */

    div.light_square .pp_left ,
    div.light_square .pp_middle,
    div.light_square .pp_right,
    div.light_square .pp_content { background: #fff; }

    div.light_square .pp_expand { background: url(../images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat; cursor: pointer; } /* Expand button */
    div.light_square .pp_expand:hover { background: url(../images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat; cursor: pointer; } /* Expand button hover */
    div.light_square .pp_contract { background: url(../images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat; cursor: pointer; } /* Contract button */
    div.light_square .pp_contract:hover { background: url(../images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat; cursor: pointer; } /* Contract button hover */
    div.light_square .pp_close { width: 75px; height: 22px; background: url(../images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat; cursor: pointer; } /* Close button */

    div.light_square .pp_arrow_previous { background: url(../images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat; } /* The previous arrow in the bottom nav */
    div.light_square .pp_arrow_previous.disabled { background-position: 0 -87px; cursor: default; }
    div.light_square .pp_arrow_next { background: url(../images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat; } /* The next arrow in the bottom nav */
    div.light_square .pp_arrow_next.disabled { background-position: -22px -87px; cursor: default; }

    div.light_square .pp_next:hover { background: url(../images/prettyPhoto/light_square/btnNext.png) center right no-repeat; cursor: pointer; } /* Next button */
    div.light_square .pp_previous:hover { background: url(../images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat; cursor: pointer; } /* Previous button */

    /* ————————————————————————
    DO NOT CHANGE
    ————————————————————————- */

    div.pp_pic_holder a:focus { outline:none; }

    div.pp_overlay {
    background: #000;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9500;
    }

    div.pp_pic_holder {
    display: none;
    position: absolute;
    width: 100px;
    z-index: 10000;
    }

    .pp_top {
    height: 20px;
    position: relative;
    }
    * html .pp_top { padding: 0 20px; }

    .pp_top .pp_left {
    height: 20px;
    left: 0;
    position: absolute;
    width: 20px;
    }
    .pp_top .pp_middle {
    height: 20px;
    left: 20px;
    position: absolute;
    right: 20px;
    }
    * html .pp_top .pp_middle {
    left: 0;
    position: static;
    }

    .pp_top .pp_right {
    height: 20px;
    left: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    }

    .pp_content {
    height: 40px;
    position: relative;
    text-align: left;
    width: 100%;
    }

    .pp_content .pp_details {
    display: none;
    margin: 10px 15px 2px 20px;
    }
    .pp_description {
    display: none;
    float: left;
    margin: 0;
    }

    .pp_nav {
    clear: left;
    float: left;
    margin: 3px 0 0 0;
    }

    .pp_nav p {
    float: left;
    margin: 2px 4px;
    }

    .pp_nav a.pp_arrow_previous,
    .pp_nav a.pp_arrow_next {
    display: block;
    float: left;
    height: 15px;
    margin-top: 3px;
    overflow: hidden;
    text-indent: -10000px;
    width: 14px;
    }

    .pp_hoverContainer {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2000;
    }

    a.pp_next {
    background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;
    display: block;
    float: right;
    height: 100%;
    text-indent: -10000px;
    width: 49%;
    }

    a.pp_previous {
    background: url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;
    display: block;
    float: left;
    height: 100%;
    text-indent: -10000px;
    width: 49%;
    }

    a.pp_expand,
    a.pp_contract {
    cursor: pointer;
    display: none;
    height: 20px;
    position: absolute;
    right: 30px;
    text-indent: -10000px;
    top: 10px;
    width: 20px;
    z-index: 20000;
    }

    a.pp_close {
    display: block;
    float: right;
    text-indent: -10000px;
    }

    .pp_bottom {
    height: 20px;
    position: relative;
    }
    * html .pp_bottom { padding: 0 20px; }

    .pp_bottom .pp_left {
    height: 20px;
    left: 0;
    position: absolute;
    width: 20px;
    }
    .pp_bottom .pp_middle {
    height: 20px;
    left: 20px;
    position: absolute;
    right: 20px;
    }
    * html .pp_bottom .pp_middle {
    left: 0;
    position: static;
    }

    .pp_bottom .pp_right {
    height: 20px;
    left: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    }

    .pp_loaderIcon {
    display: none;
    height: 24px;
    left: 50%;
    margin: -12px 0 0 -12px;
    position: absolute;
    top: 50%;
    width: 24px;
    }

    #pp_full_res {
    display: none;
    line-height: 1 !important;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    }

    div.ppt {
    color: #fff;
    display: none;
    font-size: 17px;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 9999;
    }

    /* ————————————————————————
    Miscellaneous
    ————————————————————————- */

    .clearfix:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .clearfix {display: inline-block;}

    /* Hides from IE-mac */
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */

    use the repository jquery form google, also to make your site faster:

    Code:

    use , the compressed version of prettyphotos, that work well i IE7.

    see’a

    # October 15, 2009 at 6:56 am

    Thanks Locke,

    I’m using the original CSS and downloaded the compressed version of prettyPhoto however it still for some reason does not like IE. Not sure where else to go from here as it should work…. Then again we are dealing with a Microsoft product. :)

    Tim

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

You must be logged in to reply to this topic.

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