WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Problem formatting search box, GO button overlapping

Reply
  Thread Tools Display Modes
Old 9th April 10, 09:05 AM   #1
Curiosity101
WLC Member
 
Join Date: Apr 2010
Posts: 1
Default Problem formatting search box, GO button overlapping

Basically as in the title. I inserted a search box onto the site I'm working on. It was fine in IE. on compatability mode but is totally skewed in IE. 8 and Firefox. I'm hopinh it's some glaringly obvious mistake in my code. Basically I've aligned them both left, one after the other, but in IE 8 it decided to put them both 'absolute left' and one on top of the other.

My HTML
Code:
<link href="/includes/searchbox.css" rel="stylesheet" type="text/css">
<form action="http://www.colortronic.co.uk/searchresults.asp" id="cse-search-box">     
<input type="hidden" name="cx" value="000842598121066580450:nztl14kexbi" >   
<input type="hidden" name="cof" value="FORID:11" >    
<input type="hidden" name="ie" value="UTF-8" >     
<input type="text" name="q" value="search our site" onblur="this.value = this.value || this.defaultValue;" onfocus="this.value == this.defaultValue &amp;&amp; (this.value = '');">    
<button type="submit" name="sa">Go</button> 
</form>
My CSS
Code:
#cse-search-box form{ 
width: 300px;
padding: 0px 0px 0px 0px; 
margin:-68px 0 0 0;
} 

#cse-search-box input{ 
background-color:#ffffff; 
width: 180px; 
height: 15px; 
float: left; 
padding: 2px 2px 2px 2px;
border-bottom:1 #000000 solid;
border-left:1 #043182 solid;
border-top:1 #043182 solid;
border-right:1 #000000 solid;
margin:-68px 3px 0 2px;
color:#043182;
font-size: 8pt; 
} 

#cse-search-box button{ 
background-color:#f2f5fb;
border-bottom:1 #f9fafb solid;
border-left:1 #ffffff solid;
border-top:1 #ffffff solid;
border-right:1 #f9fafb solid; 
color:#09275d;
font-size: 8pt;
width: 21px; height: 21px; 
cursor: pointer; float: left; border: 0; margin-top: 0px; 
margin:-67px 3px 0 0;
} 

#cse-search-box button:hover{
border-bottom:1 #f9fafb solid;
border-left:1 #ffffff solid;
border-top:1 #ffffff solid;
border-right:1 #f9fafb solid;
background-color:#7095db; 
color:#0c275e;
font-size: 8pt;
width: 21px; height: 21px; 
cursor: pointer; float: left; border: 0; 
margin:-67px 3px 0 0;
}
And here is the site... you can tell straight away what the problem is... www.colortronic.co.uk

I really appreciate anyone who can tell me how to fix it.

Last edited by meesa; 9th April 10 at 04:02 PM. Reason: Added [code] Tags
Curiosity101 is offline   Reply With Quote
Old 9th April 10, 04:04 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,134
Default Re: Problem formatting search box, GO button overlapping

Put that <link /> tag in the head, not in the body. That fixes it.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 09:46 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyright© 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.