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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With