There is a search box div that contains a boxhead div and a boxbody div. Inside the boxbody div, there is a searchToggle div. When the user clicks a certain link on the page, the display style property of the searchToggle div is toggled between block and none.

The 2 background-images for the body of the search box are set via the css of the searchBox div and the boxbody div. In IE7, when the searchToggle div is hidden, the background-image from the searchBox div extends on the left more than it should. It shows up correctly when the display of the searchToggle div is block. Everything show up correctly, in both cases in IE8 and FF.

Any ideas why this is happening?

The relevant HTML:

<div class="searchBox">
    <div class="boxhead">
        <h2></h2>
    </div>
    <div class="boxbody">
        <div id="searchToggle" name="searchToggle">
        </div>
    </div>
</div>

The relevant CSS:

.searchBox {
    margin: 0 auto;
    width: 700px;
    background: url(/images/myImageRight-r.gif) no-repeat bottom right;
    font-size: 100%;
    text-align: left;
    overflow: hidden;
}

.boxbody {
    margin: 0;
    padding: 5px 30px 31px;
    background-image: url(/images/myImageLeft.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
}