View Full Version : Need help with Search-box CSS please

12-01-2009, 08:21 PM

I'm adding a search box and custom search button to my site.

The search-box is looking ok in Internet Eplorer 8 and Firefox. But Internet Explorer 6 & 7 is not displaying correctly -
I have used 3 images - one for the left corner image, one for the middle repeat-x image, and one for the right-hand search-button image.

My css and html is as follows -

#searchform div {
margin: 0px 0px 0px 0px;
background-image: url(images/searchbox_rounded_left_small.jpg);
background-repeat: no-repeat;
background-position: left top;
padding: 0px 0px 0px 8px;
#searchform #search {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
background-image: url(images/searchbox_rounded_middle.jpg);
background-repeat: repeat-x;
border-width: 0px;
height: 18px;
#searchform input {
vertical-align: top;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url(images/searchbox_rounded_right.jpg);

<form method="post" action="page.html" id="searchform">
<input type="text" name="search" id="search" /><label for="search"><input type="image" title="Search" src="images/searchbox_rounded_right.jpg" alt="Search" /></label>

12-02-2009, 12:22 PM
Can anyone help with the display issue? :)

12-02-2009, 01:21 PM
Try adding float:left to #mod_search_searchword. That seems to fix it using the IE Developer toolbar.

12-02-2009, 02:38 PM
I've moved the search box onto its own page to test it -
I will try adding a float left when I get home.

12-02-2009, 06:12 PM
I think I have fixed it, It looks ok in my IE8 and IE7 Compatability view, and FF 3.55, and in IE Testers IE6.

I added a float: left; to the #searchform div, and #searchform input, and set the font-size of the #searchform #search to 12px, and gave it a height of 100%.

Could you see how it looks from this link? http://www.tomsspecialreserve.co.uk/searchform2.html

12-03-2009, 08:46 AM
Looks OK to me now...