IE7 left offset for rotated image

GoogleCodeExporter commented 9 years ago

Using IE7 the image rotated have a left offset.
I use the v2 of jqueryrotate.

To fix this problem i add this lines in _Loader function:
    this._container.style.top = "0px";
    this._container.style.left = "0px";

In this way the position absolute BUG of IE is fixed.

Regards ;)

Original issue reported on code.google.com by daniele....@gmail.com on 10 Mar 2011 at 2:57

GoogleCodeExporter commented 9 years ago

Can you provide simple test case so I can add this to a test cases please ? 
Thank you!

Original comment by wil...@gmail.com on 10 Mar 2011 at 2:58

GoogleCodeExporter commented 9 years ago

A part of one of my website:

HTML
<div style="position: relative; float:left; 
display:inline;width:400px;height:400px">
<a class="photo1" href="image.jpg"><img alt="" class="cnv" 
src="image_small.jpg" /></a>
</div>

CSS
.photo1 
{width:200px;z-index:10;position:absolute;top:0px;left:0px;float:left;display:in
line;}
.photo1 img.cnv {width:100%;}

JQUERY
$('.photo1 img.cnv').rotate(8);

Original comment by daniele....@gmail.com on 10 Mar 2011 at 3:05

GoogleCodeExporter commented 9 years ago

Well using width:100% is not very safe as this might causing problems. Its 
always better to rotate image with not changed width/height (this changes 
aspect ratio of images and makes rotation harded). Is this still happening if 
you remove that?

Thanks!

Original comment by wil...@gmail.com on 10 Mar 2011 at 9:29

GoogleCodeExporter commented 9 years ago

Yes.
I tried to remove { width:100% } from image, but the bug still remain.

In other cases I used { left:0; top:0; } to fix position absolute bug in IE, 
because if you set a DIV with { position: absolute; } without "left" IE set the 
top-left corner of the DIV in the middle of the container.

PS. Sorry for my bad english. I'm italian ;)

Original comment by daniele....@gmail.com on 11 Mar 2011 at 7:14

GoogleCodeExporter commented 9 years ago

Hi,

I tried to reproduce error but I cant. Here is what I have based on what you've 
told me. Can you please check it and try to make it reproducable? Currently I 
tested this on IE6/IE7/Chrome and got exactly the same results o_O

<html>
    <head>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
        <script type='text/javascript' src='http://jqueryrotate.googlecode.com/files/jQueryRotate.2.0.js'></script>
        <script type='text/javascript'>

            $(document).ready(function()
                    {            
                        $('.photo1 img.cnv').rotate(8); 
                    });
                </script>
        <style type="text/css">
            .photo1 {width:200px;z-index:10;position:absolute;top:0px;left:0px;float:left;display:inline;}
            .photo1 img.cnv {width:100%;}
        </style>
    </head>
    <body>

        <div style="position: relative; float:left; display:inline;width:400px;height:400px">
            <a class="photo1" href="image.jpg"><img alt="" class="cnv" src = 'http://4.bp.blogspot.com/_9a9gJG-E2Ig/SAsb-ijoBJI/AAAAAAAAAAk/OM7W_4sBAgk/s320/agatka.jpg'/></a>
        </div>
    </body>
</html>

Original comment by wil...@gmail.com on 11 Mar 2011 at 8:59

GoogleCodeExporter commented 9 years ago

Ok.
I've reproduced the bug.
The code:

<html>
   <head>
       <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
       <script type='text/javascript' src='http://jqueryrotate.googlecode.com/files/jQueryRotate.2.0.js'></script>
       <script type='text/javascript'>

           $(document).ready(function()
                   {
                       $('.photo1 img.cnv').rotate(8);
                   });
               </script>
       <style type="text/css">
           .photo1 {width: 180px; z-index:10; position: absolute; top:20px; left:190px; float:left; display:inline; text-align: center; vertical-align: middle}
           .photo1 img.cnv {width:100%;}
       </style>
   </head>
   <body style="height: 614px; width: 990px; float:left; display:inline; position: relative;">

       <div style="width: 415px; height:520px; overflow:hidden; margin: 25px 0 0 55px; padding: 0px; float:left; display:inline; text-align:left; position:relative;">
           <a class="photo1" href="image.jpg"><img alt="" class="cnv" src = 'http://4.bp.blogspot.com/_9a9gJG-E2Ig/SAsb-ijoBJI/AAAAAAAAAAk/OM7W_4sBAgk/s320/agatka.jpg'/></a>
       </div>
   </body>
</html>

Solution: In my css i've insert { text-align:center; } and IE gives importance 
to that instead of { position: absolute; }

LoL
Pardon ;)

Original comment by daniele....@gmail.com on 11 Mar 2011 at 9:59

GoogleCodeExporter commented 9 years ago

Original comment by wil...@gmail.com on 28 Mar 2011 at 7:00

Changed state: Invalid

wilq32-pwitkowski / jqueryrotate

IE7 left offset for rotated image #26