Question

I am having this issue with an input button on IE7 that is used to search for a product (as you can guess from the image) for some reason in IE7 this button is being thrown into random places and not sticking to the set position that it should. This only happens in IE7, not any browser, so I was curious if anyone knew why it would be doing this? (Also IE7 support is not my choice, has to be done.)

My Css:

dl#Navigation input.Button {
background: none repeat scroll 0 0 #FFFFFF;
border: 2px solid #3B9BD9;
color: #000000;
}
dl#Navigation input.Smallest {
cursor: pointer;
width: auto;
}

Html:

    <dt>Search Products<br />
    <web:SearchTextBox runat="server" id="SearchKeyword" class="Text" />
    <web:SearchSubmit ID="SearchSubmit1" runat="server" SearchBoxes="SearchKeyword" Text="Go" URL="~/catalogue/results.aspx" Class="Smallest Button" />
    </dt>

Answer 1

One of the things I’d suggest doing is to check that the parent container (which is somehow is a dt here) has a proper width to hold both elements and then set the width property to the input element.

However there are some other ways of positioning the elements and achieving the same result. Using floats for instance would do the same effect. Use float: left on both elements (input and button). But to do so, you need to understand the peculiarities of floats and how to deal with them.

P.s. Another piece of advice concerning your sample css code would be to review your selectors. Try putting the following css instead of yours and nothing will change (hopefully 🙂 ), but the efficiency of the selectors is better

#Navigation .Button {
    background: #FFF;
    border: 2px solid #3B9BD9;
    color: #000;
}
#Navigation .Smallest {
    cursor: pointer;
}