I styled a search bar on this site here
It disappears completely in IE7 (I do not need to support IE6). It works fine in any other browser I tested it so far (Chrome, IE8, Safari, Firefox, Opera).
I tried to remove and re-add CSS properties without success
HTML
<div id="access-search">
<form id="searchform" method="get" action="http://eezzyweb.com">
<div>
<input id="s" name="s" type="text" value="" size="20" tabindex="1" />
<label for="s">
<input id="searchsubmit" name="searchsubmit" type="submit" value="Search" tabindex="2" />
</label>
</div>
</form>
</div>
CSS
#searchform div{
position:relative;
float:right;
开发者_Python百科display:inline;
top:6px;
right:10px;
width:250px;
height:22px;
background:url(images/search-bkg-complete.png) 0 0 no-repeat;
}
input#s{
position:relative;
width:210px;
height:16px;
margin-left:5px;
background:none;
padding:3px 0;
}
#searchsubmit {
background:url(images/submit-button.png) 0 2px no-repeat;
float:right;
width:22px;
height:21px;
text-indent:-9999px;
text-transform:capitalize;
}
input#s, #searchsubmit{
vertical-align:middle;
border:0;
line-height:1;
font-size:90%;
}
#searchsubmit:hover{
cursor:pointer;
}
Lol...I solved it. There was an overflow:hidden on a parent container!
精彩评论