homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Search bar

5+ Year Member

Msg#: 4093932 posted 11:51 am on Mar 9, 2010 (gmt 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;}



Msg#: 4093932 posted 7:46 am on Apr 18, 2010 (gmt 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]>

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved