开发者

Issues with an abs positioned search bar in all IE's?

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)alt text http://www.flickr.com/photos/47949149@N05/4394899733/

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" >&nbsp;&nbsp;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=开发者_JAVA百科"submitBtn"><span>search</span></button>
  </form> 
  <p>
  <small>Search or browse by
  <a href="merchants.php">merchant</a> 
  <a href="categories.php">category</a>&nbsp;or
  <a href="brands.php">brand</a>
  </small>
  </p>
  <script type='text/javascript'>document.search.q.focus();</script></div>

Doctype is XHTML 1.1


Sorry I left out the CSS, bit of rush job and completely forgot about it. Was in the process of putting together a SSCCE version as recommended by BalusC and came across the problem.

My php was spitting out one too many double quotes for each . If you look at the HTML theres an extra quote mark after the 'value' field. FF and every other browser was smart enough to ignore it except IE (even IE8).

I was convinced it would be a stupid IE width fix or something along those lines. oh well, I'll remember to validate next time!

So in a round about way I suppose BalusC fixed my problem, would vote you up but still a stack rookie :-( thanks

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜