I've tried googling but can't find any hints to my problem. Theres so many IE bugfixs I can't think whats going on with this one.
What I've got is a 3 column layout with header and footer. The left column and main content div are both in a container div thats floated left (left col and main content floated left/right within it). The right column is floated right.
In the main content div I've got a search bar that has its HTML at the bottom (below aany content) but is absolute positioned so its at the top. (see image)
This works fine in IE6+ and FF until I load one of the pages that has a dropdown menu for ordering products (ie-Price:low to high etc).
For some reason this causes all versions of IE to go nuts and add the search bar to the bottom of 'order by' input and remove styling???
here's the HTML:
<div id="maincontent">
<h1 class="title">Search</h1><h2 class="ban" > Browsing all </h2>
<div class="ban">
<form class="ban" method="GET" action="/search.php">
Order by: <input type="hidden" name="q" value="" /><input type="hidden" name="page" value="1" />
<select name="sort" onchange="JavaScript:this.form.submit();">
<option value="relevance" selected='selected'" >Best Match</option>
<option value="rating" " >Rating</option>
<option value="priceAsc" " >Price: Low to High</option>
<option value="priceDesc" " >Price: High to Low</option></select><noscript>
<input type="submit" value="Go" /></noscript></form></div>
and search HTML...
<div id="searchform">
<form name="search" action="/search.php">
<input type="text" onblur="javascript: this.className = 'ba1';" onfocus="javascript: this.className = 'focused';" class="ba1" name="q" id="q" size="50" value="" />
<button value="search" type="submit" class="submitBtn"><span>search</span></button>
</form>
<p>
<small>Search or browse by
<a href="merchants.php">merchant</a>
<a href="categories.php">category</a> or
<a href="brands.php">brand</a>
</small>
</p>
<script type='text/javascript'>document.search.q.focus();</script></div>
Doctype is XHTML 1.1