• 0

help with search bar


Question

Hi was wondering if anyone could help me with the problem im having with my search form on ie

here is whats wrong

this is my search:

search-1.png

how it looks in firefox:

searchff.png

finally how it looks in ie 8:

search-ie.png

heres my css:

#searchsidebar{
	width:215px;
	height:40px;
	position:fixed;
	left:753px;
	top:2px;
	display:inline;
	float:left;
}

form#searchform{
	border: none;
	width:215px;
	height:40px;
	display:inline;
	float:left;

}
#search input.box {
	color: #fff;
	font-family:"Segoe UI", Tahoma, Geneva, Verdana;
	font-size: 0.8em;
	width:170px;
	height:23px;
	font-weight:bold;
	padding:2px 20px 2px 15px;
	background: url(images/search.png) no-repeat;
	display:inline;
	float:left;
}
#search input.box:focus {
	background: url(images/search.png) no-repeat;
	background-position:  0 -41px;
}
#search input#searchsubmit {
	width: 26px;
	height: 26px;
	margin:0 0 0 -30px;
	cursor: pointer;
	position:relative;
	text-indent: -9999px;
	background: url(images/searchbtn.png) no-repeat;
	background-position:-132px;
	display:inline;
	float:left;
}

and finally the html for the form:

<div id="searchsidebar">
	<div id="search">
			<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
				<input type="text" value="<?php echo wp_specialchars($s, 1); ?>" class="box" name="s" id="s" size="15" />
				<input type="submit" id="searchsubmit" value="Search" />
			</form>

	</div>
</div>

any help would be appreciated.

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

Just a guess but couldn't you add padding: 0 0 0 18px; to solve the text from overlapping your search icon?

yeah thats what i thought i put padding:2px 20px 2px 15px; on the #search input.box, works in firefox, but in ie the text just keeps going and seems to ignore the padding

Link to comment
Share on other sites

  • 0

yeah thats what i thought i put padding:2px 20px 2px 15px; on the #search input.box, works in firefox, but in ie the text just keeps going and seems to ignore the padding

Yep, browsers in general render styles in form controls very differently. It's not uncommon that the padding in text-direction isn't followed. Even if you don't support IE6, it's still better to apply the styles (also the padding, borders) to a div (or in this case to the form) that contains the text input field, and then making the input field borderless, outlineless and backgroundless.

Link to comment
Share on other sites

  • 0

Yep, browsers in general render styles in form controls very differently. It's not uncommon that the padding in text-direction isn't followed. Even if you don't support IE6, it's still better to apply the styles (also the padding, borders) to a div (or in this case to the form) that contains the text input field, and then making the input field borderless, outlineless and backgroundless.

the :focus pseudo-class only works with input tho doesnt it?

I was hoping to have the border brighten when focused upon (ie clicked).

guess the best solution would probably be to leave it alone?

Link to comment
Share on other sites

  • 0

the :focus pseudo-class only works with input tho doesnt it?

I was hoping to have the border brighten when focused upon (ie clicked).

guess the best solution would probably be to leave it alone?

Yeah, focus only works with links, form controls and other editables. But you could use JavaScript and onfocus event.

Small example using jQuery:

$("input#s").focus(function(){
	$("#searchform").css('background-position','0 -41px');
});

Ofcourse yet one solution is moving the search button outside the field.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.