Couple of Resizable Bugs on Right Aligned Div's

Couple of Resizable Bugs on Right Aligned Div's

Hi
 
I've noticed a couple of problems making things resizable that that are fixed right aligned. The example code is below.
 
The first example makes the div's shoot to the left as soon as the resizing begins, but works in Firefox.
 
The second example is when resizing items from alsoresize, they fixed right items' width goes in from the left rather than the right, this problem is Firefox only.
 
Resizing Fixed Right (IE+Chrome Issue):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <style>
                #box1{
                    background: #CCC;
                    width: 500px;
                    height: 100px;
                    position: fixed;
                    top: 10px;
                    right: 0px;
                }
            </style>     
            <link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery-ui.css" type="text/css" media="all" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
            <script type="text/javascript">
                    $(document).ready(function() {
                        $("#box1").resizable({
                                handles: 'w'
                        });
                    });
            </script>
        </head>
        <body>
            <div id="box1"></div>
        </body>
    </html>



























 
Resizing Fixed Right with AlsoResize (Firefox Issue):
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <style>
                #box1, #box2, #box3 {
                    background: #CCC;
                    width: 500px;
                    height: 100px;
                    position: fixed;
                    top: 10px;
                    left: 0px;
                }
                #box2 {
                    left: auto;
                    right: 0px;
                    top: 120px;
                }
                #box3 {
                    left: auto;
                    right: 0px;
                    top: 240px;
                }
            </style>     
            <link rel="stylesheet" href="http://jquery-ui.googlecode.com/svn/tags/latest/themes/base/jquery-ui.css" type="text/css" media="all" />
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
            <script type="text/javascript">
                    $(document).ready(function() {
                        $("#box1").resizable({
                                alsoResize: '#box2,#box3',
                                handles: 'e'
                        });
                    });
            </script>
        </head>
        <body>
            <div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
        </body>
    </html>








































 
If anyone can help it would be great.
 
Thanks