IE 7/8 CSS div size problem with a img background

Question

Hi guys.

I'm designing a clean style to use in some web apps. And I've come across a IE bug (always the same).

Well its pretty simple. I have a gradient background, and on top of it a rectangle with no border and its filled with nothing and with a shadow around it, giving the illusion that its on top of the background, as you can see in the snapshot.

Its displayed well in all browsers except IE. IE displays like this.

---

IE increases about 4 px to the top div with the class "content-top-shadow". And it shouldn't. I have used margin and padding 0 to fix it and no luck.

PS: The png's have transparency.

Any idea how can i fix this bug, or whats wrong in the CSS?

Thanks.

Here is the code:

HTML

    <div class="content-holder">
        <div class="content-center">
            <div class="content-top-shadow"></div>
            <div class="content-center-holder"></div>
            <div class="content-bottom-shadow"></div>
        </div>
    </div>

CSS

.content-holder {
    width: 100%;
    height: 570px; /*once complete change to auto*/
    background-image: url(images/content-holder-bg.png);
    background-repeat: repeat-x;
    padding-top: 20px;
    text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
    width: 918px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.content-top-shadow {
    width: 918px;
    height: 9px;
    background-image: url(images/content-top-shadow-bg.png);
    background-repeat: no-repeat;
}
.content-center-holder {
    width: 918px;
    height: 200px; /*once complete change to auto*/
    background-image: url(images/content-center-holder-bg.png);
    background-repeat: repeat-y;
}
.content-bottom-shadow {
    width: 918px;
    height: 9px;
    background-image: url(images/content-bottom-shadow-bg.png);
    background-repeat: no-repeat;
}

Answer 1

IE thinks your div should be bigger than 9px, because of text size, even if there is no text in it (!), so you need to set

font-size:1px;

or something like that, on the top and bottom divs.

Answer 2

Here's something that helps me overcome cross-browser incompatibilites when it comes to empty spaces especially within DIVs and TDs. Place this as the sole content of the empty space, while making sure your spacer.gif image is a 1px x 1px transparent dot. Cheers!

<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>