Question

I am using Jquery Rotate to rotate an image around a meter, and it works great but in IE7 and IE8 it gets pushed up about 200 pixels and has a black stroke/border around the image.

I am using jQueryRotate3.js which has it working, but the position is off, and not sure where the black border is coming from?

JS:

            var start = 0;
        // Sets the Value of the City for now   
            var angle = 1 + Math.floor(Math.random() * 180);

            $("img.pointer").rotate({
                 angle: start,
                 animateTo: angle,
                 easing: $.easing.easeInOutSine
            })

HTML:

<div class="city-details">
   <div class="details">
     <img class="pointer" src="http://demo.omnigon.com/christian_bovine/shamelesscity/images/pointer.png" alt="" />
    </div>
</div>​

You can see the code here: http://jsfiddle.net/xtian/6gcS8/1/

I would really like to get this working in IE7 and IE8.

Answer 1

jsFiddle DEMO

I looked into the jQuery Rotate v3.1 script your using and it’s sparse with just the minimal it needs to get the job done for IE, which is nice considering.

Just include two CSS rules for top and left, based on your margin-top and margin-left values to have it working in IE series of non CSS3 browsers.

Example:

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    top: 211px;
    left: 48px;    
    margin: 211px 0 0 48px;
}

Note there is no need to set CSS position since this script sets it to absolute which over-rides anything you provide.

A method to fix the image black border issue in IE browsers is to set the background-color property to the value that matches the background… expect in your case you have 3 colors of blue along with white in the middle section… so that’s not a good idea.

Instead, use the most common solution which is a PNG8 Filetype Image with Transparency, as discussed in this SO Answer.