CSS/IE7: The Case of the Extending Background-Image
- by dmr
The situation:
There a collapsible advanced search box. It is made up of 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 "Show/Hide", the display style property of the searchToggle div is toggled between block and none. (The search fields are hidden and the search boxbody gets much smaller).
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 (see Here). It shows up correctly when the display of the searchToggle div is block (see
Here). Everything show up correctly, in both cases, in IE8 and FF.
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;
}
