Question

Using IE 8, my search form is not displayed correctly. The input field is too low. In Firefox, Chrome and Safari, everything is okay.

This is my HTML:

<form class="search" role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" placeholder="Suchen..." name="s" id="s" />
<input type="submit" id="searchsubmit" value="Start" />
</form>

This is my CSS:

.search {
background: #F3F4F3;
padding: 10px;
width: auto;
color: #666;
font-size: 11px;
line-height: 1.3em;
padding-top: 10px;
margin-bottom: 20px;
margin-top: 0px;

}

input {
color:#fff;
border:1px solid #B3B5B3;
background:transparent;
outline:none;
height:21px;
padding:0;
margin: 0;
padding: 0px 8px;
font-family: $std-sans-font;

}

input[type="text"] {
color: #515b57;

}

:-moz-placeholder {
color:#515b57;

}

::-webkit-input-placeholder {
color:#515b57;

}

input:focus {
font-style: normal;
@include single-box-shadow(rgba(255,255,255,0.5), 0px, 0px, 6px);

}

form {
display:inline-block;

}

input[type="submit"] {
background:#B3B5B3;
height:23px;
border:0;
&:hover, &:focus {
    @include single-box-shadow(rgba(255,255,255,0.5), 0px, 0px, 6px);
}

}

Maybe, there is a problem with the padding?

Answer 1

You just missing float property so edit your css with this bellow

input[type="text"] {
   color: #515b57;
   margin-right: 2px;
   float: left;
}

input[type="submit"] {
background:#B3B5B3;
height:23px;
float: left;
&:hover, &:focus {
    @include single-box-shadow(rgba(255,255,255,0.5), 0px, 0px, 6px);
}​

input::-moz-focus-inner
{
    border: 0;
    padding: 0;
}

And it should work. See it on jsfiddle.
input::-moz-focus-inner correct text-align in input.