Question

The CSS3 transition effect on this page works perfectly well on every other browser except IE. It also adds a border to the top and to the left of the thumbnails. I have tried making the borders of all the elements 0 but it still didn’t help. The css is as shown below.

.slide-up-boxes .showbox a {
    display: block;
    margin: 0 0 20px;
    height: 157px;
    overflow: hidden;
    width: 315px;
    float: left;
    border:none;
    padding: 0px;
    background: transparent;
        }

        .slide-up-boxes .showbox img { 
            color: #333; 
            text-align: center;
            margin-right: 15px;
            width: 315px;
            float: left;
            height: 157px; 
            font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
            zoom: 1;
            filter: alpha(opacity=45);
            opacity: 0.5;
             -webkit-transition: all 0.2s linear; 
             -moz-transition: all 0.2s linear; 
             -o-transition: all 0.2s linear;
        }

    .showbox a:hover img { 
            margin-top: -155px; 
            opacity: 0; 
            height: 157px; 
            width: 315px;

        }

        .showbox object {
    color: white;
    background: #393838;
    font: 12px/15px Georgia, Serif;
    opacity: 0;
    -webkit-transform: rotate(6deg);
    -webkit-transition: all 0.4s linear;
    -moz-transform: rotate(6deg);
    -moz-transition: all 0.4s linear;
    -o-transform: rotate(6deg);
    -o-transition: all 0.4s linear;
    width: 314px;
    float: left;
    height: 154px;
    border: none;
    padding: 0px;
    margin: 0px 15px 0px 0px;
        }
        .slide-up-boxes .showbox a:hover object { 
            opacity: 1; 
            width: 314px;
            border: none;
            -webkit-transform: rotate(0); 
            -moz-transform: rotate(0); 
            -o-transform: rotate(0); 
            zoom: 1;
        }
    .slide-up-boxes .showbox#show1 object { 
    background: url(images/huethumb.jpg) ; 
    padding-top: 110px; zoom: 1;
    border: none;

    }
    .slide-up-boxes .showbox#show2 object { 
    background: url(images/pizzathumb.jpg) ; 
    padding-top: 110px; zoom: 1;
    border: none;

    }
    .slide-up-boxes .showbox#show3 object { 
    background: url(images/rickolthumb.jpg) ; 
    padding-top: 110px;
    border: none;

    }
    .slide-up-boxes .showbox#show4 object { 
    background:url(images/bernie-thumber.jpg) ; 
    padding-top: 110px; zoom: 1;
    background-repeat: no-repeat;
    border: none;

    }
    .slide-up-boxes .showbox#show5 object { 
    background: url(images/nollythumb.png) ; 
    padding-top: 110px; zoom: 1;
    border: none;

    }
    .slide-up-boxes .showbox#show6 object { 
    background:url(images/photothumg.jpg) ; 
    padding-top: 110px; zoom: 1;
    border: none;

    }
    .slide-up-boxes .showbox#show7 object { 
    background:url(images/tradersthumb.png) ; 
    padding-top: 110px; zoom: 1;
    border: none;

    }
    .slide-up-boxes .showbox#show8 object { 
    background:url(images/wpbathumb.jpg);
    padding-top: 110px; zoom: 1;
    border: none;

    }
    .slide-up-boxes .showbox#show9 object  { 
    background:url(images/peterthumb.png);
    padding-top: 110px;
    zoom: 1;
    border: none;
    }

Answer 1

Anything you do with -webkit or -moz will not work with IE, they’re browser engine specific css styles. ms-transform should work in IE9, but there is no transition style. See this MSDN article on CSS Compatibility and Internet Explorer for more details.