Text box creates gap when floated left in IE7

Question

Hi,

I've got a left rounded corner box -> textbox -> right rounded corner box which all make up part of a search box. All's well in FF, Chrome, IE8 but not IE7.

I've checked it using the debug tool and and I have tried a number of options, none of which want to work at the moment, so I am hoping someone might know what this issue (bug) might be please?

Here's a snippet of my code:

<div class="roundBox4">
  <img src="../App_Themes/MyChoice2010/Images/reality-box-top.gif" width="228" height="8" /><img
                    src="../App_Themes/MyChoice2010/Images/reality-box-locate.gif" width="228" height="49" />
                <asp:ContentPlaceHolder ID="Box4Content" runat="server">
                </asp:ContentPlaceHolder>
                <div class="locateABroker">
                    <img src="../App_Themes/MyChoice2010/Images/locate-broker-left.gif" class="locateBrokerLeft"
                        height="19" width="3" /><asp:TextBox ID="TextBox1" CssClass="locateBrokerCenter"
                            runat="server"></asp:TextBox><img src="../App_Themes/MyChoice2010/Images/locate-broker-right.gif"
                                height="19" width="3" class="locateBrokerRight" />
                    <a href="" class="locateBrokerSubmit">Submit</a><img src="../App_Themes/MyChoice2010/Images/box-arrow.gif"
                        class="linkArrow" width="8" height="14" />
                </div>

Answer 1

The only thing that I can say about IE7 is that you almost literally need to declare everything in your CSS. Inheiretance is abysmal in IE7. I would make sure that you are a) using a good reset.css and b) try declaring any padding, etc. directly on the element that is giving you issues.