Jump to content

Search Bar won't work in IE 8 & Chrome


beckybramwell

Recommended Posts

I'm making a site with a search bar on. It works fine in Firefox, but won't dislpay correctly in IE8 & Chrome. I've attached a file of how it looks in each browser and also the HTML and CSS. Hope someone can help! Thanks in advance 28b4jnn.jpg

<div id="search-wrapper">		  <h1>search</h1>		  <form class="search-wrapper" method="get" action="http://www.google.com/search">			<input type="text" name="q" size="29.5" maxlength="255" placeholder="Enter search here..." />			<button type="submit">GO</button>		  </form> </div><!--end search-wrapper-->

/* Search Box */ #search-wrapper {width: 223px;height: 60px;float: right;margin: 47px 0 0 30px; }  #search-wrapper h1 {font-size: 13px;font-family: Verdana, Geneva, sans-serif;font-weight: 200;margin-top: 1px;letter-spacing: 1px;}.search-wrapper input { font-family: Verdana, Geneva, sans-serif;color: #FFF;font-size: 11px;background: #231f20;margin-top: -5px;-moz-border-radius: 1px;		-webkit-border-radius: 1px;-ms-border-radius: 1px;		border-radius: 1px;border: none;width: 150px; } .search-wrapper input::-webkit-input-placeholder {	   color: #fff;	   font-weight: normal;	   padding: 5px;	   -webkit-border-radius: 1px;	   border-radius: 1px; 	} .search-wrapper input:-moz-placeholder {		color: #fff;		font-weight: normal;		padding: 5px;-moz-border-radius: 2px;		border-radius: 2px;border: none;margin-top: -1px; 	} .search-wrapper input:-ms-input-placeholder {		color: #fff;		font-weight: normal;		padding: 5px;-ms-border-radius: 1px;		border-radius: 1px;border: none; 	}   .search-wrapper button { font-family: Verdana, Geneva, sans-serif;color: #FFF;font-size: 11px;background: #231f20;margin: -2px 0 0 0px;-moz-border-radius: 1px;		-webkit-border-radius: 1px;-ms-border-radius: 1px;		border-radius: 1px;border: none;height: 24px;		width: 28px;/*float: right;*/padding: 0;cursor: pointer;}

Link to comment
Share on other sites

After experimenting with your code, this is what I came up with.....

<!DOCTYPE html><html><head><style type='text/css'>  /*<![CDATA[*/ /* Search Box */ #search-wrapper {	 width: 223px;	 height: 60px;	 float: right;	 margin: 47px 0 0 30px;}#search-wrapper h1 {	 font-size: 13px;	 font-family: Verdana, Geneva, sans-serif;	 font-weight: 200;	 margin-top: 1px;	 letter-spacing: 1px;}.search-wrapper input{	 font-family: Verdana, Geneva, sans-serif;	 color: #FFF;	 font-size: 11px;	 background: #231f20;	 margin-top: -5px;	 padding-left:2px;			 /*ADDED*/	 border-radius: 4px;		 /*CHANGED*/	 border: none;	 width: 148px;				  /*CHANGED*/	 height: 22px;				  /*ADDED*/}.search-wrapper button {	 font-family: Verdana, Geneva, sans-serif;	 color: #FFF;	 font-size: 11px;	 background: #231f20;	 margin: -2px 0px 0px 0px;	 border-radius: 4px;		 /*CHANGED*/	 border: none;	 height: 24px;	 width: 28px;	 /*float: right;*/	 padding: 0;	 cursor: pointer;}  /*]]>*/</style></head><body>	 <div id="search-wrapper">		  <h1>search</h1>		  <form class="search-wrapper" method="get" action="http://www.google.com/search">			   <input type="text" name="q" maxlength="255" placeholder="Enter search here..." />			   <button type="submit">GO</button>		  </form>	 </div><!--end search-wrapper--></body></html>

I removed some of the elements that wasn't necessary (as far as I could see). (tested in FireFox 19.0, IE 9, Google Chrome 25 and Opera 12.02) Hope this helps...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...