ie7 inline input margin problem

HTML & CSS
1

Hi.
I have the following code:

<form action="" >
    <div id="search-box">
        <input id="search-input" ...>
        <input id="btn-search" value="search" type="submit" />         
    </div>
</form>

And the following css:

 #search-box
         {          
             width: 430px;
             margin: 0px 0px 2px 330px;
             height: 45px;
             background: transparent url(../images/bg-search.png) no-repeat;
         }

         #search-box #search-input
         {
             margin:7px 0px 0px 5px;
             width: 300px;
             height: 26px;
         }
         #search-box #btn-search
         {           
             width: 84px;
             height: 32px;
             background: transparent url(../images//btn_search.png) no-repeat;
         }

The problem is that in IE7 the margin-left of #search-box is like also applied to the #search-input so it pushes the input more to the right.
Works fine in Firefox and IE8.
Any tips?

2

You’re going to find it hard to style selects.

3

I manage to fix the input background but the selects still have white background.

4

It’s the inheriting margins bug on form elements probably

5

Thanks. I wrapped the input into a span and works fine.

Two more questions:
Is there anyway to make the input elements transparent in IE?

Also how can i use margin:auto in IE?
I have tried to add text-align center but it´s not working.

I have this:


<div class="inner">
   //page content
</div>

.inner
{
width:980px;
margin: 110px auto 30px auto;
}

Thank you for your help

6

I assumed both these inputs were in a row.

I got hit with that inherited margin bug, so now I’ve got a group of forms with silly spans wrapped around my textareas just for IE (bleh).

7

Hm, I think I’ve seen this, except it was a Good Thing in my code (had two text inputs next to each other and most browsers collapsed the space between the two while IE showed it).

Did you try explicitly setting margin: 0 on the submit button?