Search Bar Looks Fine When Loaded But Weird Position When Loading Page - css

Question

Every time I load my website or navigate the search bar button loads from different place and moves back to place after it's loaded what is wrong? Please see image to understand what I mean
http://i.stack.imgur.com/hNvGh.png
HTML Code:
<form class="searchautocomplete UI-SEARCHAUTOCOMPLETE" action="/catalogsearch/result/" method="get" data-tip="What are you shopping for?" data-url="/searchautocomplete/ajax/get/" data-minchars="3" data-delay="300">
<div class="nav">
<div class="nav-search-in">
<span class="category-fake UI-CATEGORY-TEXT">All</span>
<span class="nav-down-arrow"></span>
<select name="cat" class="category UI-CATEGORY" style="width: 52px;">
<option value="0">All</option>
<option value="3">
Appliances </option>
<option value="4613">
Books </option>
<option value="11778">
Camera & Photo </option>
<option value="13675">
Computers & Accessories </option>
<option value="43960">
Video Games </option>
<option value="44397">
Watches </option>
</select>
</div>
<div class="nav-input UI-NAV-INPUT" style="padding-left: 52px;">
<input class="input-text UI-SEARCH" type="text" autocomplete="off" name="q" value="" maxlength="128">
</div>
<div class="searchautocomplete-loader UI-LOADER" style="display:none;"></div>
</div>
<div class="nav-submit-button">
<button type="submit" title="Search" class="button"><span><span>Search</span></span></button> </div>
<div style="display: none;" class="searchautocomplete-placeholder UI-PLACEHOLDER"></div>
</form>
CSS Code:
.searchautocomplete {
float: left;
text-align: left;
box-shadow: none;
font-family: helvetica,arial,sans-serif;
position: relative;
background: none;
margin: 8px 20px 7px 20px;
}
.searchautocomplete .nav {
background: url('/skin/frontend/default/galaopendeal/images/bkg-shadow.png');
float: left;
height: 29px;
position: relative;
}
.searchautocomplete .nav .nav-input {
margin: 6px 0px 0px 10px;
padding: 0px 5px 0px 5px;
z-index: 12;
position: relative;
margin-top: -2px;
}
.searchautocomplete button.button {
width: 100px;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.searchautocomplete button.button, button.button.btn-cart {
background: #0085fb;
color: #ffffff;
border: 1px solid #0085fb;
font: bold 12px/1.35 Helvetica, Arial, sans-serif;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.searchautocomplete .searchautocomplete-loader {
position: absolute;
top: 6px;
right: 10px;
width: 16px;
height: 16px;
background: url('../../../images/mirasvit/loader.gif');
}
.searchautocomplete .searchautocomplete-placeholder {
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background: #FFF;
border: 1px solid #ccc;
padding: 15px 10px 5px 10px;
margin-top: 45px;
width: 100%;
z-index: 102;
position: absolute;
}
.searchautocomplete .nav .nav-search-in {
position: relative;
float: left;
top: -3px;
left: -3px;
z-index: 15;
}
.searchautocomplete .nav .nav-search-in .category-fake {
-webkit-border-radius: 5px 0px 0px 5px;
-moz-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px;
background-color: #fcfcfc;
background-image: -moz-linear-gradient(top, #ffffff, #f7f7f7);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f7f7f7));
background-image: -webkit-linear-gradient(top, #ffffff, #f7f7f7);
background-image: -o-linear-gradient(top, #ffffff, #f7f7f7);
background-image: linear-gradient(to bottom, #ffffff, #f7f7f7);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff7f7f7', GradientType=0);
border-right: 1px solid #dddddd;
color: #777;
cursor: pointer;
float: left;
font: normal 17px/1.35 Arial, Helvetica, sans-serif;
height: 27px;
line-height: 27px;
margin: 4px 0px 0px 2px;
padding: 0px 25px 0px 10px;
text-align: center;
white-space: nowrap;
}
.searchautocomplete .nav .nav-search-in .nav-down-arrow {
background: url('../../../images/mirasvit/sprite.png');
width: 9px;
height: 5px;
background-position: -26px -34px;
display: block;
right: 10px;
top: 16px;
position: absolute;
}
.searchautocomplete .nav .nav-search-in .category {
opacity: 0;
filter: alpha(opacity=0);
background: white;
border: 1px solid #DDD;
color: black;
cursor: pointer;
height: 29px;
left: 5px;
margin: 0;
outline: 0;
padding: 0;
position: absolute;
top: 5px;
visibility: visible;
width: auto;
}
JSFiddle might come in handy:
http://jsfiddle.net/V4ZH9/
This search bar driving me nutz please help spent many hours fixing it but I'm just new to CSS and the more I change the code the worse it works