Disappearing submit button in IE7 - css

Question

Greetings. I'm having troubles with the following legacy code. It's fine in everything except IE7, where the submit button disappears. Space is still left for it on the page, but it doesn't show. I've tried various ways of forcing hasLayout, but without success. Any suggestions?
XHTML (XHTML 1.0 Strict DOCTYPE):
<div id="headerFunctionality" class="clearfix">
<div id="headerSearch" class="clearfix">
<form action="http://foo.com" method="GET">
<label for="q">Search</label>
<input id="q" name="q" type="text" class="text" />
<input type="submit" id="btn_search" value="Search">
</form>
</div>
</div>
CSS:
#headerFunctionality {
float: right;
display: inline;
margin: 24px 14px 25px 0;
}
#headerSearch{
float: left;
margin-left: 20px;
width: auto;
}
#headerSearch label{
position: absolute;
top: -5em;
color: #FFF;
}
#headerSearch input.text{
width: 133px;
height: 18px;
border: 1px solid #999;
font-size: 0.69em;
padding: 2px 3px 0;
margin: 0 6px 0 0;
float: left;
}
/* Replace search button with image*/
input#btn_search {
width: 65px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
input#btn_search:focus, input#btn_search:hover {
background: transparent url(../images/btn.search.over.gif) no-repeat center top;
}

Answer 1

have you made sure that display:block has been added to the css on the input? That oughta do the trick.

Answer 2

This sounds like a text-indent / image-to-replace-button issue in IE6.0 and 7.0. This solution has worked for me a few times.
Make a separate stylesheet for these browser versions and put this code in your header:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->
In the CSS file, try something like this (you can change this to input#btn_search or whatever you're targeting specifically)
#btn_search {
width: 85px;
height: 20px;
padding: 20px 0 0 0;
margin: 1px 0 0 0;
border: 0;
background: transparent url(../images/btn.search.gif) no-repeat center top;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
font-size: 0;
color: #fff;
text-align: right;
text-indent: 0;
}
"color" should be the same colour as your background.
"width" should be like 20-30 pixels MORE than the width of your image.
More information and help can be found here: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution

Answer 3

There are two things I can see from the code that could cause this:
1 - the image btn.search.gif is either completely transparent, the colour of the background or not found. The button has no background colour and no border, so would not appear if not for the image/text
2 - the button visibility is set to none, which leaves space on the page but doesn't render the button. Can you look at the styles in firebug?

Answer 4

I finally sorted this by removing the:
form>input#btn_search { /* For non-IE browsers*/
height: 0px;
}
I had always included this with CSS image replacements after reading it somewhere ages ago, but leaving it out doesn't seem to have affected any other browser and has fixed the problem in IE7.

Answer 5

if you add a name attribute, does it work?

Answer 6

The problem likely comes from the Guillotine Bug. It's a bug in IE6 and IE7 that occurs when certain mixtures of :hover, float, and layout are present (see link for details). I believe that inserting this:
<div class="clear"><!-- --></div>
right before </form> and then applying the following CSS to it:
.clear {clear:both;}
would fix it.