...

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



moss2076
12-01-2009, 08:21 PM
Hello,

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 -
http://www.tomsspecialreserve.co.uk/searchform2.html
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:none;
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">
<div>
<input type="text" name="search" id="search" /><label for="search"><input type="image" title="Search" src="images/searchbox_rounded_right.jpg" alt="Search" /></label>
</div>
</form>

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

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

moss2076
12-02-2009, 02:38 PM
I've moved the search box onto its own page to test it -
http://www.tomsspecialreserve.co.uk/searchform2.html
I will try adding a float left when I get home.

moss2076
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

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum