Jquery autocomplete styling
<p>While using Jquery autocomplete, in particular after the list of recommended terms is being outputed, if you change the size of your browser's window, the whole position of the list is shifted in oposite direction in which the change is being performed.
Is there a way to avoid this from happening?
<img src="http://i.stack.imgur.com/FlDy3.png" alt="Before browser's window size has been changed"></p>

<p><img src="http://i.stack.imgur.com/rIbWM.png" alt="After browser's window size has been changed"></p>

<p>JS file:</p>

<pre><code>function autocomplet() {
    $("input#ui-autocomplete-input").autocomplete({
        minLength: 2,
        source: '/store.json',
        focus: function(event, ui){
            $("input#ui-autocomplete-input").val(ui.item.product.name);
            return false;
        },
        select: function(event, ui){
            $("input#ui-autocomplete-input").val(ui.item.product.name);
            $("input#ui-autocomplete-input").val(ui.item.product.name);
            return false;
        }
        //      source: '&lt;%= products_path(:json) %&gt;'
        //      source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
    }).data("autocomplete")._renderItem = function(ul, item){
        return $("&lt;li&gt;&lt;/li&gt;").data("item.autocomplete", item).append("&lt;a&gt;"+item.product.name+"&lt;/a&gt;").appendTo(ul);
    }
};

$(document).ready(autocomplet);
</code></pre>

<p>CSS file:</p>

<pre><code>body {
    font-size: 62.5%;
}

table {
    font-size: 1em;
}

tr:first-child{
    font-size: 4em;
    font-weight: bold;
}

td{
    width: 100px;
    height: 30px;
}

/* Site
-------------------------------- */

body {
    font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
}

/* Normal
-------------------------------- */

.normal h3,
.normal h4 {
    margin: 0;
    font-weight: normal;
}

.normal h3 {
    padding: 0 0 9px;
    font-size: 1.8em;
}

.normal h4 {
    padding-bottom: 21px;
    border-bottom: 1px dashed #999;
    font-size: 1.2em;
    font-weight: bold;
}

.normal p {
    font-size: 1.2em;
}

ul { 
    list-style: none; 
    border:none;
}



/* Misc visuals
----------------------------------*/

/* Search textbox*/

fieldset.search{
    border:none;
    width: 285px;
}

.search input.btn:hover{
    background: #FFFFFF no-repeat left;
}

.search input.btn{
    border:none;
    font-size: 1.2em;
    width: 50px;
    height: 40px;
    cursor: pointer;
    background: #fbc900;
}

.search input.box{
    border-top:5px solid #fff;
    border-bottom:5px solid #fff;
    border-left:0px;
    color: #fff;
    font-size: 1.2em;
    width: 190px;
    height: 38px;
    text-indent:8px;
    background: #D63737;
}

.search input.box:focus{
    outline-width:0;
}

.search button.btn:hover{
    background: #fbc900 no-repeat bottom right;
}
/* Corner radius */
.ui-state-focus, .ui-widget-content, .ui-state-focus, .ui-widget-header, .ui-state-focus {
    background: #DADADA;
    color: #212121;
    cursor: pointer;
    width:206px;
}

.ui-corner-all {
    position:relative;
    background-color: #213216; 
    width: 206px;
}


.ui-active-menuitem, .ui-state-hover, .ui-state-highlight{
    height: 38px;
    background:#D63737;
    cursor:pointer;
    width: 206px;

}

.ui-menu-item{
    font-size: 1em;
    text-indent:9px;
    height:38px;
    width:206px;
}
</code></pre>
