Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Search bar



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

5+ Year Member

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)

5+ Year Member

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

Featured Threads

Hot Threads This Week

Hot Threads This Month