Question

I have a problem with safari. I have searched for 6 hours straight for a fix, so exscuse me if my explanation is bad. So the thing is: I have added a hover effect on my thumbnails, it works in all browsers, but the thumbs are not placed correctly in safari and IE.
I have tried to use:

    @media screen and (-webkit-min-device-pixel-ratio:0){
    img.a {
position: absolute;
top: -500;
z-index: 10;
}

   img.b {
position: absolute;
top: -500;
}
    }

But this works for webkit browser, meaning chrome as well.

The css I am currently using which works in chrome and firefox:

    img.a {
position: absolute;
top: -500;
margin-left: -115px;
    z-index: 10;
width: 230px;
height: 120px;
border: none;
}

   img.b {
position: absolute;
top: -500;
margin-left: -115px;
width: 230px;
height: 120px;
border: none;
}

If anyone has a solution it would really save my day 🙂

Here is the site if you need to inspect: http://www.janthorb.com

Answer 1

Get rid of the CSS

div#thumbnails {
text-align:center;
}

and also get rid of your margin-left: -115px for your images and you will have something that works in both browswers.