Search bar

[geoffb]

Hi All,

Our designer had designed a nice narrow search bar as an image and now I have to make it work.

Pretty much all done except in IE7 + 6 the text you type in it lower than other search engines, this means the text is just sitting on the bottom border of the search box.

The CMS being used for this uses tokens to reference elements so the styling below had had to reflect what the cms automatically applied to that element.

My css below.

Please help.

geoffb

.search {background:url(../images/search-field-bg.gif) no-repeat; width:176px !important; height:22px;}

.searchInput {border:0px solid #8C8C8C; width:145px; background:none; background-color:transparent !important; height:12px; font-size:11px;}

input.searchButton {width:22px !important; height:22px; background:none; cursor:pointer; border:0;}

[webeno]

if it's only not working in IE, you may consider to set different styles for different browsers using the following code snippet:

<!--[if IE]>
This IS Internet Explorer
<![endif]-->

and

<![If !IE]>
This is NOT Internet Explorer
<![endif]>

Would you want to target a special version of IE, simply add the version number at the very beginning like this: <!--[if IE 6] > for Internet Explorer 6, or <!--[if IE 5.5] >for Internet Explorer 5.5. Also, you can use "lt", "gt" or "lte" and "gte", meaning less than, greater than, less than or equal and greater than or equal (respectively) like this: <!--[if lt IE 6]>