Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Search bar

11:51 am on Mar 9, 2010 (gmt 0)

Junior Member

5+ Year Member

joined:Apr 20, 2008
posts: 133
votes: 0

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.


.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;}
7:46 am on Apr 18, 2010 (gmt 0)

New User

5+ Year Member

joined:Apr 16, 2010
posts: 19
votes: 0

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


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

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]>