Search Form text in IE not working correctly

HTML & CSS
,
1

I have a search form that functions fine in all browsers except IE(11).
In IE a user must left click many times in the search form before the flashing text line appears. I have added height to the search form, but this doesnt help. I think it may have to do with the doctype or a missing meta. Please help!

Heres doctyoe and meta info…

<!doctype html>

<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/hdr-styles-en.css" rel="stylesheet" type="text/css">
<link href="css/stiky-styles-en.css" rel="stylesheet" type="text/css">

HTML (cut down)

<div id="new-sb-container"> 
    <div id="search">
      <form id="search-form" method="post" action="">
      <input type="text" name="q" id="query" placeholder="Search..."/> 
      <div id="search-category" title='Select a search category'>All Categories</div>
     </form>
    </div> <!--end search container-->

  <div id="search-submit"><form><input type="submit" id='search-submit' value="Search"></form></div>
</div><!--end sb container-->


<span id = "menuplacer">
  <div id="search-category-menu">
    <label id='search-options'>Search Options:</label><br/>
    
    <input type="radio" name="search_category" id='all_categories' value="all" checked><label for='all_categories'>All Categories</label><br/>
    
    <input type="radio" name="search_category" id='antiques' value="antiques"><label for='antiques'>Antiques</label><br/>

  </div> <!--end category menu-->
</span>

Relevant css

#new-sb-container{
	clear:both;
	overflow:hidden;
	width: 60%;
	margin-top: 20px;
}

		
div#search
{
overflow:hidden;
width: 70%;	
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
padding-left: 10px;
float:left;
position:relative;
}
		
		
		
#search-form{
float:left;
width: 100%;
}
		
		
input#query{
	position:relative;
    float:left;
	width: 60%;
	height: 34px;
	border: 1px solid #FFFFFF;
	overflow:hidden;
	}
	

		
div#search-category /*grey category box*/
{
			
border-radius: 7px;
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
display:inline;
background-color: #CCCCCC;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
cursor: default;
margin-right:5px;
float:right;
}
	
	

#menuplacer{
clear:both;
width:41%;
position: absolute;
}

	
div#search-category-menu
{
width: 150px;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 8px;
margin-top: 10px;
z-index:1000;
position:relative;
float:right;
}	
		
		
		
div#search-submit{
float:left;
width:20px;
}
2

Hard to tell without a working example and IE11, but the first thing I notice is that you have too many <form> tags. You don’t want an extra one wrapped around the submit button. The whole form should be contained in one single pair of <form> </form> tags.

3

Thanks for the reply Ralphm…

I have removed the submit button form tag, but still no joy. After clicking numerous times, the text line will show…But the clear text (x) in IE doesn’t function and text within the search field cannot be highlighted.

I’m pretty sure I had a problem like this before and added a meta tag that fixed the issue. I have googled so much looking for answers, but can’t find anything related. =(

4

I’d wager that’s unlikely to be the issue. Sounds more like a CSS/HTML issue. It would be easier for you to get help if you set up a working code example at CodePen.

5

I put the code into codepen and it runs fine!
link to codepen here

but when I view in browser (IE) from dreamweaver, the text field area is difficult to click in to…very strange.

The only apparent difference is that codepen uses its own doctype/meta tags… Maybe theres a problem or something missing in mine?

6

What do you mean by that? I get suspicious at the notion of Dw being involved in this somehow.

7

I could have said that easier…

When I open explorer from dreamweaver (view in browser). Or just generally view the code in explorer, the input field text is difficult to get in to. It’ll take 5+ clicks to access,

But in codepen, even with explorer, its fine.

Must be some meta tag or doc type or something?

8

I doubt it, but you could check. If you click the gear icon beside HTML in CodePen, you can add assets to the <head> section of your pen. Try adding in your meta stuff and see if that changes anything for IE11.

9

Added, but no change. The searchbar functions fine in codepen. Maybe theres some conflicting css. I’ll add the bar to a new html doc and test that

10

works in new html doc =)
BUT…
doesnt work when I copy and paste the working one into my header!!!

This is messed up =(