Hi Guys,
I am testing some cool stuff with twitter bootsrap but got stuck in 1 issue…
I have made a test seach bar with bootstrap system according to responsive design system, but when I am trying to minimize my browser window size my search bar icon image in coming down.
here is the link of my page…
http://www.jetflightz.com/responsive-test/index.html
html:
<form class="span5 form-inline topbar-search-container pp-search">
<input class="span4 pp-search" type="text"placeholder="Search pureprofile" value="" />
<button href="#" class="btn btn-info pp-search">
<i class="icon-search icon-white"></i></button>
</form>
css:
.topbar-search-container{position:relative;top:8px;}
.pp-search input[type=‘text’]{height:22px;border:1px solid #cccccc;-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px;}
.pp-search button{height:30px;position:relative;left:-40px;-webkit-border-top-right-radius:7px;-webkit-border-bottom-right-radius:7px;-moz-border-radius-topright:7px;-moz-border-radius-bottomright:7px;border-top-right-radius:7px;border-bottom-right-radius:7px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;}
.btn .icon-search{
display:block;
text-indent:-9999px;
overflow:hidden;
width:17px;
height:16px;
}
.btn .icon-white{background:url(…/img/icon-search.png) no-repeat;}